이벤트 버블링 (Event Bubbling)
이벤트 버블링이란?
화면의 특정요소에서 이벤트가 발생했을 때, 해당 이벤트가 상위요소들로 전달되어 가는 특성
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>
var divs = document.querySelectorAll('div');
divs.forEach(div => {
div.addEventListener('click', (event) => {
console.log(event.currentTarget.className);
});
});위의 코드에서 최하위 div 태그 <div class="three"></div>를 클릭하면
three
two
oneconsole에서는 다음과 같은 결과가 실행된다.
브라우저는 화면의 특정 요소에서 이벤트가 발생했을 때, 해당 이벤트 최상위에 있는 요소까지 이벤트를 전파시킨다.
이벤트 캡쳐 (Event Capture)
이벤트 캡쳐란?
화면의 특정 요소에서 이벤트가 발생했을 때, 해당 이벤트의 최상위 태그에서 더 하위의 화면 요소들로 전달되어 가는 특성
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>
var divs = document.querySelectorAll('div');
divs.forEach(div => {
div.addEventListener('click', (event) => {
console.log(event.currentTarget.className);
}, { capture: true });
});이벤트 캡쳐는 addEventListener()의 세 번째 옵션 값으로 capture: true를 설정해준다.
default값은 false이기 때문에 ture로 옵션을 설정해줘야 이벤트 캡쳐가 작동한다.
위의 코드에서 최하위 div태그 <div class="three"></div>를 클릭하면
one
two
three다음과 같은 결과가 실행된다.
.three를 클릭했지만 이벤트 캡쳐에 의해서 최상위 태그인 body태그에서 해당 태그를 찾아 내려간다.
따라서 body-one-two-three의 순으로 상위에서 하위로 이벤트가 전파된다.
event.stopPropagation()
이벤트 버블링, 캡쳐를 사용하지 않고 원하는 요소의 이벤트만 작동시키기 위해 사용한다.
stopPropagation()을 사용하면 클릭한 요소의 이벤트만 실행되고 버블링, 캡쳐가 이루어지지 않는다.
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
var divs = document.querySelectorAll('div');
divs.forEach(div => {
div.addEventListener('click', (event) => {
event.stopPropagation(); // 버블링, 캡쳐를 막아준다.
console.log(event.currentTarget.className);
});
});만약 위 코드에서 <div class="two"></div>를 클릭 했다면 console에는 다음과 같은 결과가 출력된다.
two
더 높은 곳으로