[JavaScript] 버블링(Bubbling)

JavaScript Bubbling 이란?

자바스크립트 이벤트 버블링(Event Bubbling)은 HTML 요소들이 중첩되어 있을 때, 해당 요소에서 발생한 이벤트가 부모 요소들로 전파되는 현상을 말한다. 이벤트가 발생한 요소에서 시작하여 최상위 부모 요소까지 이벤트가 전파되는 것을 의마한다.

예를 들어 아래와 같은 HTML 구조가 있다고 가정하면

<div id="outer">
  <div id="inner">
    <button id="button">클릭</button>
  </div>
</div>

버튼을 클릭하면 버튼에서 클릭 이벤트가 발생한다 여기서 이벤트는 버튼에만 적용되는것이 아니라, 버튼을 포함하는 부모 요소들에게도 전파된다, 따라서 클릭 이벤트가 버튼에서 발생하면 순서대로 " inner ", " outer " 요소 들에게도 이벤트가 전파되는 것이 이벤트 버블링이다.

이벤트 버블링을 이해하면, 이벤트를 캡처링(Capturing) 단계와 버블링 단계에서 각각 처리하거나, 이벤트가 전파되는 동안 다른 요소들에 영향을 주는 것을 막을 수 있다.

만약 이벤트 버블링을 원치 않는 경우 event.stopPropagation() 메서드를 사용하여 이벤트의 전파를 중단시킬 수 있다.