이벤트 위임(Event Delegation)은 무엇이고 언제 유용한가요?

이벤트 위임은 부모 요소 하나에 리스너를 두고 이벤트 버블링으로 자식 이벤트를 처리하는 방식입니다. 동적 요소와 많은 리스트 항목에서 효율적입니다.

핵심 개념

핵심 기준은 버블링과 동적 요소 처리입니다.

이벤트 위임은 자식마다 리스너를 붙이는 대신 공통 부모에서 이벤트를 받는 방식입니다. 클릭 이벤트처럼 버블링되는 이벤트는 자식에서 부모로 전파되므로 부모에서 target을 검사해 처리할 수 있습니다. 리스트가 크거나 항목이 동적으로 추가되는 화면에서 특히 유용합니다.

동작 흐름

1. 브라우저의 어느 단계나 API가 관여하는지 확인합니다.
2. 사용자 경험, 보안, 접근성에 미치는 영향을 함께 봅니다.
3. DevTools나 실제 지표로 추측을 검증합니다.
4. 적용 후 캐시, 호환성, 예외 상황을 점검합니다.

실제 예시

list.addEventListener('click', (event) => {
  const button = event.target.closest('button[data-id]');
  if (!button || !list.contains(button)) return;
  selectItem(button.dataset.id);
});

예시는 핵심 흐름을 단순화한 것입니다. 실무에서는 팀의 배포 방식, 데이터 크기, 장애 영향도, 유지보수 비용까지 함께 고려해야 합니다.

실무에서 주의할 점

• 브라우저 구현 차이와 모바일 환경을 함께 확인해야 합니다.
• 성능 문제는 JavaScript만 보지 말고 네트워크와 렌더링 상태를 같이 봐야 합니다.
• 보안·접근성 기능은 편의성보다 안전한 기본값을 우선해야 합니다.

함께 연결해서 보면 좋은 키워드

EventDelegation, DOM, EventBubbling, UI

정리

한 줄로 정리하면, 이벤트 위임은 부모 요소 하나에 리스너를 두고 이벤트 버블링으로 자식 이벤트를 처리하는 방식입니다. 동적 요소와 많은 리스트 항목에서 효율적입니다. 개념의 정의뿐 아니라 적용 조건과 실패했을 때의 증상까지 함께 이해하는 것이 중요합니다.