이벤트 "버블링" 🫧 and "캡처링" 📸

안녕하세요🔥 오늘의 블로그 주제는 바로 이벤트 버블링과 캡처링에 대해서 알아보려고 합니다.

저도 많은 블로그와 자료를 보면서 버블링에 대한 이해가 조금은 있었는데 캡처링에 대한 내용을

처음 알게 되었습니다. 약간 반대? 느낌의 버블링이라고 보시면 이해하기 쉬울 것 같은데요!! 그러면

바로 한번 버블링과 캡처링에 대해서 알아보도록 하겠습니다.

 

 

버블링이 뭘까? 🫧

버블링이란 어떠한 요소의 이벤트가 발생을 하게 되면 이 요소는 할당된 이벤트를 발생시킵니다.

그리고 부모 요소에도 이벤트를 발생시키게 되는데 가장 최상단위의 요소까지 과정을 계속 반복합니다.

 

예를 들어서 버블이 되는 예시 코드를 한번 만들어서 보겠습니다.

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <span onclick="alert('span')">span</span>
  </div>
</form>

위와 같이 span 태그를 클릭하면 그 위로 div를 실행시키고 form까지 전달이 되는 것입니다.

그러기에 가장 깊은 곳에서 최상단위로 거품처럼 올라간다고 해서 버블링이라고 합니다 🥹

 

이러한 부모에 대한 자세한 정보는 event.target을 통해서 알 수 있습니다~

e.target.value 전 구문을 많이 사용했었네요 ㅎㅎ

 

거의 모든 이벤트를 발생한다.

하지만 안 되는 이벤트는 뭘까? ➡️ focus 등 같은 이벤트는 버블링이 되지 않습니다.

몇몇 버블링이 안 되는 이벤트들이 존재합니다. 

 

어? 그럼 나는 이 이벤트는 버블링을 발생시키고 싶지 않아요 .. 가능할까요?

네 가능합니다.

바로 event.stopPropagation()를 사용하면 가능!!

event.stopPropagation()를 사용하면 그 요소만 핸들러가 작동을 안 하고 다른 것 작동!!

 

그럼 전부다 막고 싶은데 .. 이럴 땐?

➡️ event.stopImmediatePropagation()를 사용하면 작동 전체를 막을 수 있다는 사실

사실 이러한 버블링을 강제적으로 막는 방법은 좋지 않아요 .. 🥲
상황에 따라서 다르겠지만 정말 중요하고 필요하다고 생각이 들 때에만 사용하는 것을 추천드려요!!

 

그러면 캡처링은 뭘까? 📸

 

캡처링은 버블링의 모순적인 말이라고 보면 이해하기 쉽다.

버블링은 깊은 곳에서 최상단위로 올라가는 개념이라면 캡처링은 최상단위에서 내려가는 개념이다.

 

사람들이 버블링에 대한 내용은 많이 알고 있을 것 같은데 캡처링에 대한 내용은 많이 모를 것 같다.

이유는? 실질적으로 캡처링이 발생하는 상황이 버블링에 비해 비교적 적기 때문이다.

 

이러한 캡처링에 대한 내용을 알기 위해서는 addEventListener의 capture 옵션을 true 설정이 필요하다.

<form>FORM
  <div>DIV
    <p>P</p>
  </div>
</form>

<script>
  for(let elem of document.querySelectorAll('*')) {
    elem.addEventListener("click", e => alert(`캡쳐링: ${elem.tagName}`), true);
    elem.addEventListener("click", e => alert(`버블링: ${elem.tagName}`));
  }
</script>

인터넷에서 많은 사람들이 이 위와 같은 코드로 설명을 많이 하고 예시로 좋아 가져왔다.

 

여기서 가장 하위에 p 태그를 클릭했을 때 이벤트가 발생을 하기 시작하는 이벤트가 전파되는 순서는

•  HTML → BODY → FORM → DIV 이 순서로 이벤트가 발동이 된다.
• 하위에 있는 p 태그는 한번 더 실행이 된다.
• 다시 DIV → FORM → BODY → HTML 이 순서로 올라가서 이벤트 발동을 한다.

 

 

그리고 마지막은 또 뭐다?? 역시 다시 한번 공식 문서를 읽고 정리하기!!

Event.bubbles - Web API | MDN

 

 

느낀 점

이벤트 버블링에 대한 이해도를 더 높일 수 있었고 캡처링이라는 새로운 개념에 대해서 알 수 있어서 좋았다.

버블링을 강제적으로 막는 것이 효율성을 떨어트린다는 것과 실제로 버블링을 막는 상황이 많이 발생하지 않는다고 하는데 그러한 상황이 언제인지 한번 찾아봐야겠다.

 

 

오늘도 즐거운 개발~~🔥