이벤트 전파(이벤트 버블링)

🔗 참고

1. 자바스크립트 Deep Dive
2. Github

📌 이벤트 전파

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 이벤트 전파라고 한다.
생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM트리를 통해 전파됩니다.

이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3단계로 구분할 수 있다.

1. 캡처링 단계(Capturing Phase): 이벤트가 상위 요소에서 하위 요소 방향으로 전파
2. 타겟 단계(Target Phase): 이벤트가 이벤트 타겟에 도달
3. 버블링 단계(Bubbling Phase): 이벤트가 하위 요소에서 상위 요소 방향으로 전파

이벤트 위임

이벤트 위임은 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법을 말한다.

이벤트 전파에서 봤듯이 이벤트는 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치할 수 있다. 이벤트 위임을 통해 상위 DOM 요소에 이벤트 핸들러를 등록하면 여러 개의 하위 DOM 요소에 이벤트 핸들러를 등록할 필요가. 없다.

<div class="itemList">
  <li>
    <input type="checkbox" id="item1" />
    <label for="item1">1</label>
  </li>
  <li>
    <input type="checkbox" id="item2" />
    <label for="item2">2</label>
  </li>
</div>

방법 1. 각각 부여하기

let inputs = document.querySelectorAll('input');
inputs.forEach((input) => {
  input.addEventListener('click', () => {
    alert('clicked');
  });
});

방법 2. 이벤트 위임 활용하기

let itemList = document.querySelector('.itemList');
itemList.addEventListener('click', (e) => {
  console.log(e);
  if (e.target.type === 'checkbox') {
    alert('click');
  }
});

e.stopPropagation

위 API는 해당 이벤트가 전파되는 것을 막는다. 따라서, 이벤트 버블링의 경우에는 클릭한 요소의 이벤트만 발생시키고 상위 요소로 이벤트를 전달하는 것을 방해한다. 그리고 이벤트 캡쳐의 경우에는 클릭한 요소의 최상위 요소의 이벤트만 동작시키고 하위 요소들로 이벤트를 전달하지 않는다.