이벤트 버블링 (Event Bubbling) 이란?

이벤트 버블링이란?

간단하게 설명하면, 이벤트가 자식에서 부모로 올라가는 현상을 말한다.

<div onclick="alert('div');">
  <span onclick="alert('span');">hello</span>
</div>

위와 같은 내용의 html 태그가 존재할 때,

• span 을 클릭하면 div 의 onclick 이벤트까지 같이 호출되는 현상을 말한다.
  • 사실 이 현상은 document 객체를 만날 때까지 올라간다.
• 정리하자면, 자식 엘리먼트의 이벤트가 호출된 이후에 자동으로 부모 엘리먼트의 이벤트도 호출된다.
• 마치 물 아래서 기포가 올라가는 모양과 같다고 하여 버블링이라고 한다.

버블링 되는 이벤트의 종류

• 거의 모든 이벤트이다.
• 몇가지 예외로 focus 와 같은 이벤트는 버블링되지 않는다.

버블링을 중단하는 방법 (event.stopPropagation())

<div onclick="alert(event.currentTarget);">
  <span onclick="event.stopPropagation()">HELLO</span>
</div>

• 이렇게 자식 엘리먼트에서 event.stopPropagation() 를 호출하면, 이벤트 버블링은 더이상 일어나지 않는다.
  • 아무리 span 엘리먼트를 클릭해도 alert 가 일어나지 않는다.

같은 엘리먼트 내부의 버블링을 중단하는 방법 (event.stopImmediatePropagation())

<div id="div">
  <span id="span">HELLO</span>
</div>

<script>
  const $span = document.getElementById("span");

  $span.addEventListener("click", (e) => {
    console.log("span1");
    e.stopImmediatePropagation();
  });

  $span.addEventListener("click", (e) => {
    console.log("span2");
  });
</script>

태그 하나에 두 개 이상의 이벤트 리스너가 두개 붙어있을 때, 먼저 붙은 이벤트 리스너의 콜백에서 e.stopImmediatePropagation() 를 호출하면, 중첩된 다른 이벤트 리스너까지 무시된다.

버블링도 막고, 같은 엘리먼트에서 이벤트 리스너를 중첩 호출하는 것도 막는다.

버블링을 중단하기 전에 알아야 할 것

• 이벤트 버블링은 유용하게 쓰이는 경우가 많다.
• 이벤트 버블링을 때때로 막을 필요도 있지만, 이벤트 버블링을 활용하는 방법을 아는 것도 중요하다.
  • ex) 페이지 기능 이용 통계 분석 -> 자식 태그만 클릭하더라도 그 부모 태그에 해당하는 통계까지 같이 쌓을 수 있다.

더 알아야 할 것

이벤트 캡처링 에 대해 알아야 한다.

• 사용자가 클릭 이벤트를 트리깅하면 사실 버블링만 발생하는 것이 아니다.
• 이벤트 캡처링 -> 타겟 -> 이벤트 버블링 순으로 이벤트가 흘러간다.
• 캡처링은 부모 -> 자식으로 오는 흐름을 말한다.
• 타겟은 정확히 내가 클릭한 요소를 말한다.
• 버블링은 자식 -> 부모로 가는 흐름을 말한다.