이벤트버블링

[JavaScript] 이벤트(Event)란? 에서 이벤트(Event)와 이벤트 핸들러(Event Handler)에 대해 알아봤었습니다. 요약하자면 다음과 같습니다.

이벤트를 감지하는 이벤트 핸들러를 HTML과 연동
1번에서 연동된 HTML 부분에 사용자가 어떤 행동을 하면 (예: 클릭) 이벤트가 발생
이벤트 핸들러에 등록된 코드 실행

음.. 근데 만약 HTML 요소들이 중첩되어있다면 이벤트 핸들러는 어떻게 동작할까요? 예를 들어

<html>
  <body>
    <!-- 빨간색 -->
    <div class="depth1" onClick="alert(this.className)">
      <!-- 초록색 -->
      <div class="depth2" onClick="alert(this.className)">
      	<!-- 파란색 -->
        <div class="depth3" onClick="alert(this.className)">
        </div>
      </div>
    </div>
  </body>
</html>

이 코드에서 depth3 영역을 클릭한다면, 어떤 alert가 뜰까요? 한번 직접 눌러볼까요?

분명 하나의 영역만 클릭했는데, 모든 onClick 이벤트 핸들러가 동작한 것을 확인하셨나요?

위와 같이 중첩된 요소에서 이벤트가 발생할 때는, 이벤트 전파(Event Propagation)가 이루어집니다. 마치 브랜드의 e스킬처럼 말이죠.

롤 브랜드 E 스킬 - 대상이 불타는 상태일때 쓰면 다른 대상에게 화염이 전파된다

이처럼 이벤트가 전파되는 방식에는 **이벤트 버블링(Bubbling)**과 **이벤트 캡처링(Capturing)**이 있습니다. 지금부터 알아볼까요?

이벤트 버블링(Event Bubbling)

버블링의 원리는 간단합니다. 이벤트가 발생한 요소부터 점점 부모 요소를 거슬러 올라가서 window 까지 이벤트를 전파하는 것이죠. 마치 거품(Bubble)이 물 아래에서부터 위로 올라가는 것 처럼요!

위에서 살펴본 예제가 바로 버블링에 해당됩니다.

depth3 영역을 클릭하면 onClick 핸들러가 동작합니다.
이어서 부모 요소인 depth2의 onClick 핸들러가 동작합니다.
이어서 부모 요소인 depth3의 onClick 핸들러가 동작합니다.

또한 "거의" 모든 이벤트는 버블링 됩니다. focus 이벤트와 같이 버블링 되지 않는 이벤트도 있으니 각 이벤트의 특성을 정확하게 알고 있어야 합니다.