**이벤트 위임(event delegation)**은 자식마다 하나씩 리스너를 다는 대신 공통 조상에 단일 리스너를 붙이고, **이벤트 버블링(event bubbling)**을 사용해 실제로 어떤 자식과 상호작용했는지(event.target을 통해) 식별하는 것을 의미합니다.
js
.().(
li.(, handle));
.().(, {
li = e..();
(li) (li..);
});
**이벤트 위임(event delegation)**은 자식마다 하나씩 리스너를 다는 대신 공통 조상에 단일 리스너를 붙이고, **이벤트 버블링(event bubbling)**을 사용해 실제로 어떤 자식과 상호작용했는지(event.target을 통해) 식별하는 것을 의미합니다.
.().(
li.(, handle));
.().(, {
li = e..();
(li) (li..);
});
<li>를 클릭하면 이벤트가 위로 버블링됩니다: li → ul → body → document. 따라서 <ul>의 리스너는 그 어떤 <li> 자식에서 온 클릭이든 받으며, e.target이 정확히 클릭된 요소를 알려줍니다. closest("li")는 target에서 위로 올라가 의도한 요소를 찾습니다(내부 요소 클릭도 처리함).
<li>에는 새 리스너가 필요 없습니다. 부모가 이미 처리하기 때문입니다.이는 버블링에 의존하므로, 버블링되지 않는 이벤트(focus, blur — 대신 focusin/focusout 사용)에는 동작하지 않습니다. 이것은 정확히 React가 내부적으로 사용하는 기법입니다(앱 전체에 대한 루트 리스너 하나).