이 글은 캡틴판교님의 글을 보고 정리한 글입니다.
보다 자세한 설명을 원하신다면 캡틴판교님 블로그에서 확인하시길 바랍니다.
이벤트 버블링이란?
이벤트 버블링의 예시를 살펴보기 위해 간단한 코드를 작성했다.
- index.html
<body>
<div class="A">
A
<div class="B">
B
<div class="C">C</div>
</div>
</div>
</body>- script.js
const logEvent = (event) => {
console.log(event.currentTarget.className);
};
// 이벤트의 현재 타겟의 클래스 이름을 콘솔에 출력하는 함수
const divs = document.querySelectorAll("div");
divs.forEach((div) => {
div.addEventListener("click", logEvent);
});
// 모든 div에 클릭하면 LogEvent 함수가 실행되도록 했다.
- C를 클릭했을 때
이렇게 C의 상위 div들도 순차적으로 실행되게 된다(!)
B를 누르면 B, A로 실행되고
A를 누르면 A가 실행되게 된다.
이것이 이벤트 버블링인데, 요약하자면
이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 대, 해당 이벤트가 더 상위의 화면 요소들로 전달되어가는 특성을 의미한다.
-> 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때, 그 이벤트를 최상위에 있는 화면 요소까지 전파시킨다.
이벤트 캡쳐
이벤트 캡쳐는 이벤트 버블링과 반대방향으로 진행되는 이벤트 전파 방식이다.
이벤트 버블링 : 하위에서 상위로
이벤트 캡쳐 : 상위에서 하위로
코드로 구현해보면
const logEvent = (event) => {
console.log(event.currentTarget.className);
};
const divs = document.querySelectorAll("div");
divs.forEach((div) => {
div.addEventListener("click", logEvent, {
capture: true // default : false
});
});이처럼 capture 옵션만 true로 해주면, 이벤트 버블링과 반대로, 해당 이벤트를 상위에서부터 전파를 한다.
- C를 클릭했을 때
이벤트 전달을 막고 싶을 때(stopPropagation())
해당 이벤트가 전파되는 것을 막는 stopPropagation() API를 사용하면 간단하게 해결가능하다.
const logEvent = (event) => {
event.stopPropagation();
console.log(event.currentTarget.className);
};- 이벤트 버블링에서는 C만 나오고
- 이벤트 캡쳐 방식일때는 A가 나오게 된다.
