이벤트 위임(Event Delegation)

이벤트 위임

각 요소마다 이벤트 핸들러를 할당하는 것이 아닌, 하위 요소의 공통된 상위 요소에 이벤트 핸들러를 할당해 비슷한 요소를 한번에 다룰 수 있는 개념입니다.

ex)
HTML

<nav class="nav">
  <ul class="nav__menus">
    <li class="nav__item">
      <a class="nav__menu" href="#menu1">menu1</a>
    </li>
    <li class="nav__item">
      <a class="nav__menu" href="#menu2">menu2</a>
    </li>
    <li class="nav__item">
      <a class="nav__menu" href="#menu3">menu3</a>
    </li>
    <li class="nav__item">
      <a>SignUp</a>
    </li>
  </ul>
</nav>

<section id="menu1">...</section>
<section id="menu2">...</section>
<section id="menu3">...</section>

JS

document.querySelectorAll(".nav__menu").forEach(function (el) {
  el.addEventListener("click", function (e) {
    e.preventDefault();
    const id = this.getAttribute("href");
    document.querySelector(id).scrollIntoView({
      behavior: "smooth",
    });
  });
});

위 JS처럼 작성하게 되면 element마다 이벤트 핸들러를 추가 해야하는 문제가 생긴다. 이런 불편함을 해결하기 위해선 공통의 부모 요소인 ".nav__memus"에 이벤트 리스너를 추가하면 아래 하위 요소들에게 이벤트 핸들러를 할당시켜 문제가 해결된다.

해결 JS

document.querySelector(".nav__menus").addEventListener("click", function (e) {
  e.preventDefault();
  const id = e.target.getAttribute("href");
  document.querySelector(id).scrollIntoView({
    behavior: "smooth",
  });
});

이벤트 위임의 장단점

장점

• 초기화가 단순해지고 메모리가 절약됨. 많은 이벤트 핸들러를 할당하지 않고 컨테이너 하나에만 설정하면 되기 때문
• 코드가 간결해짐. 요소를 추가, 삭제할 때 해당 요소에 할당된 핸들러를 추가하거나 제거할 필요가 없기 때문
• DOM 수정이 쉽다. innerHTML이나 유사한 기능을 하는 스크립트 요소 덩어리를 더하거나 뺄 수 있기 때문

단점

• 버블링이 되지 않는 낮은 레벨 이벤트에 할당한 핸들러는 event.stopPropagation()를 쓸 수 없음.
• 모든 하위 컨테이너에서 발생하는 이벤트에 응답해야하므로 CPU에 부하가 늘어날 수 있음. 하지만 실제론 잘 고려하지 않음.

이벤트 전파(Event Propagation)

자바스크립트 대부분의 이벤트는 캠쳐링과 버블링 단계를 가진다.

이벤트 실행 순서

1. td 태그 클릭시 이벤트가 최상위 조상에서 시작해 이벤트가 발생한 요소까지 모든 상위 요소를 지나간다.(캡쳐링 단계)
2. 이벤트 타겟 요소에 도착해 이벤트 실행 후(event.target)

• 이 때 이벤트가 발생하자마자 콜백 함수를 실행한다.

3. 다시 위로 모든 상위 요소를 지나간다(버블링 단계)

만약 이벤트 리스너에서 3번째 옵션인 capture 옵션이

• false 이면 → 이벤트 핸들러가 버블링 단계에서 동작.
• true 이면 → 이벤트 핸들러가 캡쳐링 단계에서 동작.

출처
https://ingg.dev/event-delegation/
https://ko.javascript.info/event-delegation
https://racoonlotty.tistory.com/entry/javascript-이벤트-버블링과-캡처링