JavaScript - 이벤트 위임(Event Delegation)

이벤트 위임

상위 요소에서 하위 요소의 이벤트를 제어하는 방식

** 이벤트 위임을 사용하기 위해 이벤트가 반드시 버블링되어야 함(focus 이벤트처럼 버블링 되지 않는 이벤트나, stopPropagation()을 사용한 경우에는 이벤트 위임을 사용 X)

장점

• 다수의 이벤트 핸들러를 할당하는 대신에 하나의 이벤트 핸들러만 할당 -> 코드가 단순해지고 메모리가 절약
• 요소가 추가되거나 제거되는 동작이 많은 경우에도 짧은 코드만으로 이벤트 처리가 가능

코드예시

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>
const list = document.querySelector('ul');

list.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log(e.target.innerText);
  }
});

• li태그에 일일이 이벤트 핸들러를 할당하는 대신에, 공통 부모 요소인 ul태그에 하나의 이벤트 핸들러를 할당