이벤트 버블링은 특정 화면 요소에 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. (Internet Explorer)
e.g. index.html
<body>
<div class="one">
<div class="two">
<div class="three">
<button class="button">버튼</button>
</div>
</div>
</div>
<script src="event.js"></script>
</body>
e.g. event.js
let divs = document.querySelectorAll("div");
function ClickButton(tag) {
console.log(tag.currentTarget.className);
}
divs.forEach((div) => {
div.addEventListener("click", ClickButton);
});
// three,two,one이 차례로 나온다.
// three만 나올 줄 알았는데 three,two,one 이 다 나온다.. (이벤트 버블링)
왜 버블링이 필요한가?
버블링이 없다면 부모 요소는 자식 요소에서 발생한 이벤트를 알 수 없다. 즉, DOM의 계층 구조에서 상위 요소가 하위 요소의 이벤트를 감지하고 반응할 수 있도록 하기 위해 버블링이 존재한다.
대표적인 예시가 모달이다. 모달 바깥을 클릭했을 때 모달을 닫는 기능을 구현하려면 document 레벨에서 클릭 이벤트를 감지해야 한다. 버블링이 없다면 모달 안의 버튼 클릭이 상위로 전달되지 않아 document는 클릭 자체를 알 수 없게 된다.
document.addEventListener("click", function (event) {
if (!modal.contains(event.target)) {
closeModal();
}
});
이처럼 버블링은 "자식에서 발생한 이벤트를 부모가 알아야 하는 상황" 을 해결하기 위해 존재하며, 아래의 이벤트 위임 패턴도 결국 이 버블링 특성을 활용한 것이다.
이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식 (Netscape 브라우저)