이벤트 버블링, 캡처링, 위임

이벤트 버블링 (Event Bubbling)

특정 요소에서 이벤트가 발생했을 때 해당 이벤트가 상위 요소들로 전파된다.

이벤트 캡처링

특정 요소에서 이벤트가 발생했을 때 이벤트 버블링과 반대로 이벤트가 하위 요소들로 전파된다.

이벤트 위임

하위 요소에 각각의 이벤트를 등록하는 것이 아닌, 상위 요소에서 하위 요소의 이벤트들을 모두 제어하는 패턴이다.

<ul id="box">
  <li>
    <input type="checkbox" id="item1" />
  </li>
  <li>
    <input type="checkbox" id="item2" />
  </li>
</ul>

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

위와 같이 input 요소들을 모두 가져온 다음 각각의 요소에 이벤트 리스너를 등록한 경우, 새로운 input 요소를 동적으로 추가했을 때 매번 이벤트 리스너를 등록해야하는 번거로움이 있기 때문에 아래와 같이 이벤트를 위임한다.

let ul = document.querySelector('#box');
ul.addEventListener('click', () => {
  alert('clicked');
});

Reference
https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/