이벤트 위임(event delegation)이란 무엇이며 왜 사용하나요?

Question

IT Interview Practice · Accepted Answer

**이벤트 위임(event delegation)**은 자식마다 하나씩 리스너를 다는 대신 공통 조상에 **단일** 리스너를 붙이고, **이벤트 버블링(event bubbling)**을 사용해 실제로 어떤 자식과 상호작용했는지(`event.target`을 통해) 식별하는 것을 의미합니다. ```js // ❌ 위임 없이: 항목마다 리스너 하나 (그리고 새 항목에는 동작 안 함) document.querySelectorAll("li").forEach(li => li.addEventListener("click", handle)); // ✅ 위임으로: 부모에 리스너 하나 document.querySelector("ul").addEventListener("click", e => { const li = e.target.closest("li"); // 클릭된 항목 찾기 if (li) select(li.dataset.id); }); ``` ## 동작 방식 `

`를 클릭하면 이벤트가 위로 **버블링**됩니다: `li → ul → body → document`. 따라서 `

` 자식에서 온 클릭이든 받으며, `e.target`이 정확히 클릭된 요소를 알려줍니다. `closest("li")`는 target에서 위로 올라가 의도한 요소를 찾습니다(내부 요소 클릭도 처리함). ## 왜 가치 있는가 - **성능/메모리**: 수백, 수천 개 대신 리스너 하나. - **동적으로 추가된 요소에 자동으로 동작** — 나중에 추가된 새 `
`에는 새 리스너가 필요 없습니다. 부모가 이미 처리하기 때문입니다. - **더 간단한 정리**: 여러 개가 아니라 리스너 하나만 제거. ## 주의점 이는 버블링에 의존하므로, **버블링되지 않는** 이벤트(`focus`, `blur` — 대신 `focusin`/`focusout` 사용)에는 동작하지 않습니다. 이것은 정확히 React가 내부적으로 사용하는 기법입니다(앱 전체에 대한 루트 리스너 하나).

관련 질문

동작 방식

왜 가치 있는가

주의점