자바스크립트 이벤트 위임(Event Delegation)과 성능 최적화

웹 페이지에서 많은 DOM 요소에 이벤트 리스너를 개별로 붙이면 성능 저하와 관리 복잡도가 발생할 수 있습니다. 이런 문제를 해결하는 효과적인 기법이 바로 이벤트 위임(Event Delegation)입니다. 이 글에서는 이벤트 위임의 개념, 장점, 실전 예제, 그리고 성능 최적화 포인트까지 정리합니다.

---

✨ 이벤트 위임이란?

자식 요소마다 개별적으로 이벤트를 붙이는 대신, 상위 요소에 이벤트 리스너를 등록하고 이벤트 버블링을 통해 처리하는 방식입니다.

자바스크립트 이벤트는 기본적으로 버블링(Bubbling) 되므로, 상위 요소에서도 하위 요소에서 발생한 이벤트를 감지할 수 있습니다.

---

📌 왜 이벤트 위임을 사용할까?

• 성능 개선: DOM 요소가 많을수록 이벤트 핸들러를 줄일 수 있어 렌더링 효율 향상
• 동적 요소 대응: 이후에 추가되는 요소에도 자동으로 이벤트 적용 가능
• 유지 보수 용이성 증가

---

🧪 예제: 클릭 이벤트 위임

<ul id="menu">
  <li data-id="1">메뉴1</li>
  <li data-id="2">메뉴2</li>
  <li data-id="3">메뉴3</li>
</ul>

const menu = document.getElementById("menu");
menu.addEventListener("click", function(event) {
  const li = event.target.closest("li");
  if (li) {
    console.log(`클릭한 항목: ${li.dataset.id}`);
  }
});

• ul에만 이벤트를 등록했지만, 어떤 li를 클릭했는지 판별할 수 있습니다.
• 새로운 li를 JS로 추가해도 별도 리스너 등록 없이 동작합니다.

---

🚀 동적으로 추가되는 요소 처리 예시

const newItem = document.createElement("li");
newItem.textContent = "메뉴4";
newItem.dataset.id = "4";
document.getElementById("menu").appendChild(newItem);

• 이벤트 위임을 통해 새롭게 추가된 요소도 별도 처리 없이 자동 적용됩니다.

---

🧠 주의할 점

• event.target이 실제 클릭된 요소이므로, 원하는 요소를 정확히 판별하려면 closest() 또는 조건문 사용이 중요
• 이벤트 캡처링과 버블링 순서에 유의

---

✅ 결론

이벤트 위임은 효율적인 이벤트 관리 방식으로, 특히 요소가 많거나 동적으로 추가되는 UI에서 성능과 유지보수 측면에서 매우 유용합니다. 현대 웹 애플리케이션에서 필수적으로 알아두어야 할 실용적인 패턴입니다.