“클릭했는데 왜 부모까지 반응하지?” 자바스크립트 이벤트 버블링 핵심 정리!

자바스크립트 이벤트 버블링 완벽 정리 - 웹 개발자 필수 개념

자바스크립트 이벤트 버블링(Event Bubbling)은 웹 개발에서 매우 중요한 개념입니다. 이 글에서는 이벤트 버블링이란 무엇인지, 어떻게 동작하는지, 그리고 이를 제어하는 방법까지 실제 예제를 통해 자세히 설명합니다.

이벤트 버블링이란?

이벤트 버블링은 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 현상입니다. 마치 물방울이 안에서 바깥으로 퍼지듯이 이벤트가 확산됩니다.

실제 예제

아래는 버튼 클릭 시 어떤 순서로 이벤트가 발생하는지를 보여주는 간단한 HTML + JavaScript 코드입니다.

<div id="outer" style="padding:20px; background-color:#e0f7fa;">
  <button id="inner">클릭해보세요</button>
</div>

<script>
document.getElementById("outer").addEventListener("click", function() {
  alert("DIV 클릭됨");
});
document.getElementById("inner").addEventListener("click", function() {
  alert("BUTTON 클릭됨");
});
</script>
  

버튼을 클릭하면 BUTTON 클릭됨 → DIV 클릭됨 순서로 실행됩니다. 이것이 바로 이벤트 버블링입니다.

버블링 막는 방법

아래처럼 event.stopPropagation()을 사용하면 상위로 이벤트가 전달되지 않습니다.

document.getElementById("inner").addEventListener("click", function(e) {
  e.stopPropagation(); // 이벤트 버블링 막기
  alert("BUTTON 클릭됨");
});
  

캡처링 vs 버블링

• 캡처링(Capturing): 상위 요소부터 하위 요소까지 내려가며 이벤트 탐색
• 버블링(Bubbling): 하위 요소에서 상위 요소로 이벤트가 전파
• addEventListener의 세 번째 인자에 true를 주면 캡처링 단계에서 실행

요약

이벤트 버블링은 대부분의 브라우저에서 기본적으로 발생하며, 이를 이해하고 적절히 제어하는 것은 동적 UI 구현 시 매우 중요합니다.

---

📌 관련 키워드: 자바스크립트 이벤트 버블링, JS 이벤트 전파, 이벤트 캡처링, stopPropagation, 웹개발 필수 개념
📌 작성자: 코딩하는 늑대

📘 이벤트 버블링 실전 예제 보러가기