이벤트 버블링(Event Bubbling), 이벤트 캡쳐(Event Capture)

이벤트 등록

이벤트 등록이란 웹 애플리케이션에서 사용자의 입력을 받기 위해 필요한 기능이다.

addEventListener() 웹 API는 화면에 동적인 기능을 추가하기 위해 자연스럽게 접하게 되는 기본적인 기능이다. 사용자의 입력에 따라 추가 동작을 구현할 수 있다.

그렇다면 브라우저는 어떻게 이벤트의 발생을 감지할까? 브라우저가 이벤트를 감지하는 방법이 이벤트 버블링, 이벤트 캡쳐(Event Capture)이다.

Event Bubbling

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다.

(body 태그가 최상위 요소가 된다.)

Event Capture

이벤트 캡쳐는 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다.

이벤트가 발생했을 때 최상위 요소인 body 태그에서 해당 태그를 찾아 내려간다.

<body>
  <div class="one">
    <div class="two">
      <div class="three">
      </div>
    </div>
  </div>
</body>

var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
  div.addEventListener('click', logEvent, {
    capture: true // default 값은 false입니다.
  });
});

function logEvent(event) {
  console.log(event.currentTarget.className);
}

addEventListener() API에서 옵션 객체에 capture: true를 입력해주면 이벤트 캡쳐로 실행된다.

위 코드를 실행하면 one, two, three 순으로 콘솔에 결과가 찍힌다.

event.stopPropagation()

event.stopPropagation()는 해당 이벤트가 전파되는 것을 막는다.

이벤트 버블링의 경우에는 클릭한 요소의 이벤트만 발생히키고 상위 요소로 이벤트를 전달하는 것을 방해한다.
이벤트 캡쳐의 경우에는 클릭한 요소의 최상위 요소의 이벤트만 동작시키고 하위 요소들로 이벤트를 전달하지 않는다. (위 Event Capture의 예시 코드의 경우에는 one만 콘솔에 찍히고 이벤트 전달이 멈춘다.)

이벤트 위임(Event Delegation)

이벤트 위임은 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식이다.

이벤트 위임은 실제 바닐라 JS로 웹 앱을 구현할 때 자주 사용하게 되는 코딩 패턴이다.

<h1>오늘의 할 일</h1>
<ul class="itemList">
  <li>
    <input type="checkbox" id="item1">
    <label for="item1">이벤트 버블링 학습</label>
  </li>
  <li>
    <input type="checkbox" id="item2">
    <label for="item2">이벤트 캡쳐 학습</label>
  </li>
</ul>

var itemList = document.querySelector('.itemList');
itemList.addEventListener('click', function(event) {
  alert('clicked');
});

위 코드를 예시로 보면, <input>태그가 아닌 <ul class="itemList> 태그에 이벤트를 걸어준다. 상위 요소인 itemList가 하위 요소인 input태그에서 발생하는 이벤트를 감지하는 것이다.

참고로, 위 코드의 경우 <input>의 이벤트만 다루는 것이 아니라 <label>태그의 이벤트도 감지한다.

💡 요약
브라우저가 이벤트의 발생을 감지하는 방법에는 이벤트 버블링, 이벤트 캡쳐가 있다.

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위 요소들로 전달되는 것을 의미한다.

이벤트 버블링을 활용해 상위 요소에서 하위 요소들의 이벤트를 제어할 수도 있다. 이를 이벤트 위임(Event Delegation)이라 한다. 하위 요소에 각각 이벤트를 거는것이 아니라, 하나의 상위 태그에 이벤트를 걸어 하위 요소 태그에서 발생하는 이벤트를 감지하는 것이다.

이벤트 캡쳐는 버블링과 반대 방향으로 진행된다. 이벤트가 발생했을 때 최상위 요소인 body태그에서 해당 태그를 찾아 내려가게 된다.

버블링과 캡쳐는 이벤트가 전파되는 것이 기본이다. 하지만 이벤트의 전파를 막고 싶을 경우가 생길 수 있는데, 이때 event.stopPropagation()을 사용하면 된다.
이벤트 버블링의 경우 클릭한 요소의 이벤트만 발생시키고 상위로 전달되는 것을 막고, 이벤트 캡쳐일 경우 클릭한 요소의 최상위 요소의 이벤트만 발생시키고 하위 요소로의 전달을 막는다.

해당 사이트를 참고해 작성했습니다.

Author And Source

이 문제에 관하여(이벤트 버블링(Event Bubbling), 이벤트 캡쳐(Event Capture)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@design0728/이벤트-버블링Event-Bubbling-이벤트-캡쳐Event-Capture

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)