이벤트 위임 패턴

모두를 제어하는 하나의 리스너

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

순진한 접근 방식

document.querySelectorAll("#menu li").forEach((li) => {
  li.addEventListener("click", () => console.log(li.textContent));
});

위임을 사용하는 접근 방식

const menu = document.getElementById("menu");
menu.addEventListener("click", (e) => {
  console.log(e.target.textContent);
});

올바른 대상 찾기

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return; // clicked outside any li
  console.log("Clicked:", item.textContent);
});

검사로 보호하기

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item || !menu.contains(item)) return;
  handleSelect(item);
});

데이터 속성 사용하기

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return;
  const id = item.dataset.id;   // reads data-id
  console.log("Selected id:", id);
});

동작에 따라 전달하기

toolbar.addEventListener("click", (e) => {
  const btn = e.target.closest("button");
  if (!btn) return;
  switch (btn.dataset.action) {
    case "save": save(); break;
    case "delete": remove(); break;
  }
});

확장성이 좋은 이유

성능 참고 사항

컨테이너 선택하기

const list = document.querySelector(".task-list");
list.addEventListener("click", onTaskClick);

closest와 함께 사용하기

const cell = e.target.closest("td[data-col]");
if (cell) console.log(cell.dataset.col);

빠른 확인

복습