target.addEventListener(type, listener[, useCapture]);
addEventListener()의 세 번째 인자가 캡쳐링 여부를 결정한다.
기본값은 false이고 false일때는 버블링이 발생하고 true일때는 캡쳐링이 발생한다.
이벤트 버블링(Event Bubbling)이란
특정 요소에서 이벤트 발생 시 해당 이벤트가 더 상위 요소들로 전달되어가는 특성이다.
먼저 addEventListener()의 세 번째 인자를 false로 설정해보자
3개의 요소가 form > div > p 형태로 중첩된 구조에서 각 태그 부분을 눌렀을때 alert가 뜨게 구현했다.
p 클릭
만약 p태그 부분을 클릭하였을때 alert는 p > div > form 순서대로 alert가 뜨는 것을 볼 수 있다.
div 클릭
div상위요소인 form과 함께 div > form 순서로 alert가 뜬다.
이벤트 캡쳐링(Event Capturing)이란
이벤트 캡쳐링은 상위노드부터 하위노드로 이벤트가 전달되는 형태를 말한다.
이벤트 버블링과 반대방향으로 이벤트가 전달된다.
이번엔 addEventListener()의 세 번째 인자를 true로 설정해보자
p 클릭
이벤트 버블링과 반대로 form > div > p 로 alert가 뜬다.
div 클릭
div상위요소인 form과 함께 form > div 순서로 alert가 뜬다.
이벤트 버블링 & 캡쳐링 막기
이벤트 객체의 메서드인 event.stopPropagation()를 사용하면 된다.
이벤트 버블링 막기
버블링에서는 stopPropagation()은 클릭한 element의 이벤트만 발생시키고 상위로 이벤트 전달하는 것을 막아준다.
form > div > p 형태로 중첩된 구조에서 p 이벤트에 e.stopPropagation();를 추가해보자
p.addEventListener(
"click",
function (e) {
e.stopPropagation(); // 이벤트 막기
alert("p");
},
false
);
p 클릭
아까와는 다르게 p만 alert가 뜨고 상위 이벤트는 일어나지 않는다.
이벤트 캡쳐링 막기
캡쳐링에서 e.stopPropagation()을 걸 경우, 클릭한 element의 최상위 이벤트만 동작하고, 하위 이벤트는 발생하지 않는다.
form > div > p 형태로 중첩된 구조에서 form 이벤트에 e.stopPropagation();를 추가해보자
form.addEventListener(
"click",
function (e) {
e.stopPropagation(); // 이벤트 막기
alert("form");
},
true
);
p 클릭
form의 하위 이벤트는 alert창이 뜨지않고 최상위 이벤트 form만 alert가 뜬다
참고자료 : https://www.howdy-mj.me/dom/event-capturing-and-bubbling/