이벤트 캡처·버블링과 이벤트 위임은 어떻게 연결되나요?

이렇게 답해 보세요 (핵심 답변)

DOM 이벤트는 최상위 조상에서 실제 발생 요소(target)로 내려가는 캡처 단계, 타깃 단계, 다시 조상 요소들로 올라가는 버블링 단계를 거쳐 전파됩니다. 이벤트 위임은 이 버블링 특성을 활용해 하위 요소마다 일일이 리스너를 달지 않고 공통 부모 요소 하나에 리스너를 등록한 뒤, event.target이나 closest()로 실제 클릭된 대상을 판별해 처리하는 패턴입니다. 이렇게 하면 동적으로 추가되거나 삭제되는 자식 요소들도 하나의 리스너로 깔끔하게 관리할 수 있습니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 버튼 안의 아이콘처럼 자식 요소가 클릭될 수 있으므로 event.target.closest('button')으로 의도한 요소를 찾는 것이 안전합니다.
2. event.target은 실제 이벤트가 발생한 안쪽 요소이고, event.currentTarget은 현재 리스너가 등록된 부모 요소입니다.

면접에서 자주 하는 실수

focus나 blur처럼 기본적으로 버블링되지 않는 이벤트도 있으므로 모든 이벤트를 무조건 단순 버블링 위임으로 처리할 수 있다고 단정하지 않습니다.