[JS] stopPropagation 때문에 클릭 이벤트 리스너가 동작하지 않는다면 (feat. 캡처링)
0
1. 이벤트 리스너 등록
핑크 블럭 바깥을 클릭하면 alert을 보여줍니다.
<html>
<head>
</head>
<body>
<div class="area">
</div>
<script>
document.addEventListener('click', (event) => {
// 핑크 블럭 바깥 클릭 시 alert
if (!event?.target?.closest('.area')) {
alert('핑크 블럭 바깥 영역이 클릭되었습니다.')
}
})
</script>
<style>
* {
margin: 0;
padding: 0;
}
.area {
width: 200px;
height: 100px;
background: lightpink;
cursor: pointer;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
</style>
</body>
</html>2. event.stopPropagation()
버튼 클릭되면 alert을 보여주도록 추가되었지만, event.stopPropagation() 로 인해 핑크 영역 바깥인 버튼을 클릭해도 alert이 안보입니다.
<html>
<head>
</head>
<body>
<div class="area">
</div>
<button class="button">
<span>Click me</span>
</button>
<script>
document.addEventListener('click', (event) => {
// 핑크 블럭 바깥 클릭 시 alert
if (!event?.target?.closest('.area')) {
alert('핑크 블럭 바깥 영역이 클릭되었습니다.')
}
})
const buttonElement = document.querySelector('.button')
buttonElement?.addEventListener('click', (event) => {
event.stopPropagation()
alert('버튼이 클릭 되었습니다.')
})
</script>
<style>
* {
margin: 0;
padding: 0;
}
.area {
width: 200px;
height: 100px;
background: lightpink;
cursor: pointer;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.button {
margin-top: 30px;
margin-left: auto;
margin-right: auto;
display: block;
}
</style>
</body>
</html>3. 캡처링
이벤트 리스너 등록 시 3번째 파라미터로 true를 넣으면 캡처링 단계를 사용한다는 의미입니다. (default: false)
addEventListener(type, listener, useCapture);
이벤트 발생 시 1. 캡처링, 2.버블링 순서로 진행되는데,
- 캡처링 - window -> document -> target
- 버블링 - target -> document -> window
버블링 단계에서 event.stopPropagation()으로 이벤트 전파를 막았으니,
document에 등록된 이벤트 리스너가 동작하지 않습니다.
4. 주의사항
대부분 버블링 단계를 사용한 이벤트 리스너를 사용하니까, 캡처링은 특별한 경우에만 사용하겠다고, 규칙정하고 팀원에게 공유하고 써야겠지
callmeskye