728x90
[자바스크립트 / Javascript] 이벤트 버블링 방지 stopImmediatePropagation
stopImmediatePropagation과 비슷한 역할을하는
stopPropagation이 있는데 이들은 비슷하면서도 다른 성격을 가지고 있다
stopPropagation 같은 경우에는
상위 관련 다른 모든 이벤트 버블링 차단 기능을 수행하고
stopImmediatePropagation 같은 경우에는
상위 및 현재 레벨에 걸려있는 관련 이벤트 모두 동작하지 않도록 중단하는 역할을 하는데
하단의 예제를 통해 자세히 알아보도록 하자
기본 형태
//이벤트 상위 전파 중단
event.stopPropagation();
//이벤트 상위, 현재 레벨에 걸린 다른 이벤트 또한 동작 중단
event.stopImmediatePropatation();
샘플 코드 : event.stopPropagation()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>stopPropagation VS stopImmediatePropagation</title>
<style>
body{
margin : 0;
padding : 0;
}
.container {
display : flex;
justify-content: center;
align-items: center;
background-color: lightsteelblue;
width : 500px;
height: 300px;
}
.item {
position : relative;
background-color: lightpink;
width :400px;
height: 150px;
}
.itemBtn {
position : absolute;
top : 55px;
left : 160px;
font-size : 20px;
padding: 6px 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<button class="itemBtn">Click!</button>
</div>
</div>
<script>
document.querySelector('.container').addEventListener('click',e=>{
console.log(`컨테이너 클릭!`);
});
document.querySelector('.item').addEventListener('click',e=>{
console.log(`아이템 클릭1!`);
});
document.querySelector('.itemBtn').addEventListener('click',e=>{
//상단 이벤트 버블링 방지!!
e.stopPropagation();
console.log(`버튼 클릭1!`);
});
document.querySelector('.itemBtn').addEventListener('click',e=>{
console.log(`버튼 클릭2!`);
});
</script>
</body>
</html>결과 출력
버튼 클릭1!
버튼 클릭2!
샘플 코드 : stopImmediatePropatation()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>stopPropagation VS stopImmediatePropagation</title>
<style>
body{
margin : 0;
padding : 0;
}
.container {
display : flex;
justify-content: center;
align-items: center;
background-color: lightsteelblue;
width : 500px;
height: 300px;
}
.item {
position : relative;
background-color: lightpink;
width :400px;
height: 150px;
}
.itemBtn {
position : absolute;
top : 55px;
left : 160px;
font-size : 20px;
padding: 6px 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<button class="itemBtn">Click!</button>
</div>
</div>
<script>
document.querySelector('.container').addEventListener('click',e=>{
console.log(`컨테이너 클릭! ${e.target}, ${e.currentTarget}`);
});
document.querySelector('.item').addEventListener('click',e=>{
console.log(`아이템 클릭1! ${e.target}, ${e.currentTarget}`);
});
document.querySelector('.itemBtn').addEventListener('click',e=>{
e.stopImmediatePropagation();
console.log(`버튼 클릭1! ${e.target}, ${e.currentTarget}`);
});
document.querySelector('.itemBtn').addEventListener('click',e=>{
console.log(`버튼 클릭2! ${e.target}, ${e.currentTarget}`);
});
</script>
</body>
</html>
출력 결과
버튼 클릭1!
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] CSS Selector를 통해 엘리먼트 구분하기 Element.matches() (0) | 2021.06.02 |
|---|---|
| [Javascript] 타이머 / 카운트다운 / 멈추기 setInterval / clearInterval (0) | 2021.05.27 |
| [Javascript] 클래스 추가 / 삭제 / 포함 여부 확인 classList.(add/remove/contains) (0) | 2021.05.24 |
| [Javascript] 자식 엘리먼트 / 노드 / 태그 추가 append (0) | 2021.05.24 |
| [Javascript] 엘리먼트 속성 추가하기 setAttribute (0) | 2021.05.24 |
댓글