버블링이란?

한 요소에 어떠한 이벤트가 발생하면, 해당 이벤트가 부모 요소로 전달되어 가장 최상단의 요소까지 반복하여 전달하는 특성을 말합니다.

• 다음과 같이 onclick 이벤트가 있는 div 태그들이 중첩된 구조가 있습니다.

<div onclick="alert('첫번째')">
  <div onclick="alert('두번째')">
    <div onclick="alert('세번째')">
    </div>
  </div>  
</div>

여기서 만약, 세번째 div 태그를 클릭하면 두번째, 첫번째 alert 창이 순서대로 나타나게 됩니다.

그렇다면 만약에, 두번째 div 태그를 클릭한다면 어떻게 될까요?
맞습니다. 바로 첫번째 alert 창만 나타나게 됩니다. 이러한 특성은 바로 브라우저가 이벤트를 감지하는 방식 때문에 그렇습니다.

이런 동작방식이 마치 깊은 물속에서 떠오르는 거품과 비슷하다해서 버블링이라고 합니다.

---

그렇다면 모든 이벤트가 버블링이 될까

• 그렇지 않습니다. focus와 같이 버블링이 되지 않는 이벤트도 있지만, 거의 대부분의 이벤트는 버블링됩니다.

버블링 중단하는 방법

이벤트 객체 메소드인 event.stopPropagation()을 사용하면 됩니다.

• event.stopPropagation()은 위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들러들이 동작하는 것은 막지 못합니다. 만약 다른 핸들러의 동작도 막고 싶다면 event.stopImmediatePropagation()을 사용하면 됩니다.
• 버블링은 상황에 따라 유용할 수 있으므로, 필요한 경우를 제외하면 중단하는 것은 좋지 않습니다.