용어 사전 coding 용어 페이지

이벤트 위임

부모에 한 번만 리스너를 달고 자식 이벤트를 처리하는 패턴

event-delegation #javascript#dom#frontend

English version

다른 이름

event delegation이벤트 위임

관련 개념

콜백 컴포넌트

핵심 아이디어

이벤트 위임은 자식 요소마다 이벤트를 따로 등록하지 않고, 부모 요소에 한 번만 이벤트를 달아 실제 클릭된 대상을 판별하는 패턴입니다. DOM 항목이 계속 추가되거나 삭제되는 상황에서 특히 유용합니다.

핵심은 "이벤트가 버블링된다"는 성질을 활용하는 데 있습니다. 그래서 리스너 수를 줄이고, 새로 생긴 요소에도 별도 등록 없이 같은 동작을 적용할 수 있습니다.

이 블로그에서의 역할

Mathbong의 JavaScript 시리즈에서는 리스트 삭제 버튼, 동적 메뉴, 카드 갤러리처럼 요소 수가 변하는 UI를 다룰 때 이벤트 위임을 기본 패턴으로 설명합니다. DOM 조작과 성능 감각을 함께 익히게 하는 허브 개념입니다.

이 개념을 다루는 글

[JavaScript 시리즈 4편] DOM 선택과 이벤트로 화면 움직이기 querySelector, classList, addEventListener를 사용해 버튼, 입력 폼, 리스트를 조작하는 실전 DOM 패턴을 정리합니다.[JavaScript Series 4] Make the Page Interactive with DOM Selection and Events Covers querySelector, classList, addEventListener, and other practical DOM patterns for buttons, forms, and lists.