DOM 이벤트 흐름 이해: 버블링, 캡처링, 이벤트 위임 완벽 가이드

핵심 기술: 이 콘텐츠는 웹 브라우저 DOM에서 발생하는 이벤트가 어떻게 전달되는지에 대한 근본적인 메커니즘인 이벤트 버블링(Bubbling)과 이벤트 캡처링(Capturing)을 심층적으로 설명합니다. 이를 통해 버튼 클릭 시 부모 요소의 클릭 이벤트가 함께 발생하는 이유를 명확히 하고, event.stopPropagation()과 event.stopImmediatePropagation()의 차이점, event.target과 event.currentTarget의 개념을 이해시켜 개발자가 이벤트 흐름을 효과적으로 제어할 수 있도록 돕습니다. 또한, 이벤트 위임(Event Delegation)의 원리와 장점을 설명하며 동적으로 추가되는 요소에 대한 이벤트 처리 효율성을 높이는 방법을 제시합니다.

기술적 세부사항:
* 이벤트 전달 3단계: 캡처링(Capturing) → 타겟(Target) → 버블링(Bubbling) 순서로 이벤트가 처리됩니다.
* 이벤트 버블링: 이벤트가 발생한 요소에서 DOM 트리를 따라 상위 요소로 전달되는 기본 동작입니다. (예: 자식 요소 클릭 시 부모 요소 이벤트 트리거)
* 이벤트 캡처링: { capture: true } 옵션을 사용하여 이벤트를 하위 요소로 전달하기 전에 상위 요소에서 먼저 처리하는 방식입니다. 캡처링 리스너는 버블링 리스너보다 먼저 실행됩니다.
* 이벤트 전파 중단: event.stopPropagation()은 이벤트 전파를 상위 또는 하위 요소로 이어지는 것을 막고, event.stopImmediatePropagation()은 같은 요소에 바인딩된 다른 리스너의 실행까지 막습니다.
* event.target vs event.currentTarget: event.target은 실제로 클릭된 요소, event.currentTarget은 이벤트 리스너가 연결된 요소를 의미합니다.
* 이벤트 위임: 다수의 하위 요소에 개별적으로 리스너를 바인딩하는 대신, 공통 부모 요소에 하나의 리스너를 연결하여 이벤트를 처리하는 기법입니다. e.target을 통해 실제 클릭된 요소를 식별합니다.
* 이벤트 위임의 장점: 메모리 사용량 감소, 동적으로 추가되는 요소에 대한 자동 지원, 코드 간결화.
* 이벤트 위임의 단점: 의도하지 않은 클릭을 잡을 수 있음, 디버깅의 어려움, 특정 이벤트(blur, focus 등)에는 적용 불가.
* 이벤트 위임 최적 적용 사례: TODO 앱과 같이 동적으로 요소가 추가/삭제되는 경우, 리스트 아이템 클릭 처리 등.
* 이벤트 위임 비권장 사례: 고립된 컴포넌트, 고빈도 이벤트(mousemove, scroll), 보안/특수 요구사항, blur/focus 이벤트.

개발 임팩트: 이벤트 흐름에 대한 깊은 이해는 복잡한 UI에서 발생하는 예상치 못한 이벤트 동작을 해결하고, 더 효율적이고 성능이 뛰어난 웹 애플리케이션을 구축하는 데 필수적입니다. 특히 이벤트 위임을 통해 코드의 중복을 줄이고, 메모리 누수를 방지하며, 동적인 UI 변화에 유연하게 대처할 수 있습니다.

커뮤니티 반응: (본문에서 직접적인 커뮤니티 반응은 언급되지 않았으나, 이 주제는 프론트엔드 개발자들 사이에서 매우 빈번하게 논의되고 질문되는 내용으로, 실제 커뮤니티에서는 유용한 팁과 해결책이 활발히 공유될 것으로 예상됩니다.)