이벤트 전파 (Event Propagation)

이벤트 전파는 DOM에서 이벤트가 발생했을 때, 그 이벤트가 어떤 방식으로 전파되는지를 설명하는 개념이다.

이벤트 전파의 3단계

이벤트 전파는 크게 세 단계로 나뉘는데, 캡처링(Capturing), 타겟(Target), 그리고 버블링(Bubbling)이다.

1. 캡처링 단계 (Capturing Phase)

이벤트가 DOM 트리의 최상위 요소(document 또는 window)에서 시작하여, 이벤트가 발생한 요소(타깃 요소)로 향해 내려가는 단계이다. 이 과정에서 상위 요소들에 이벤트 리스너가 있으면 그 순서대로 실행될 수 있다.

2. 타겟 단계 (Target Phase)

이벤트가 실제로 발생한 타겟 요소에 도달하는 단계이다. 타겟 요소에 등록된 이벤트 리스너가 이 시점에 실행된다.

3. 버블링 단계 (Bubbling Phase)

타겟 요소에서 이벤트가 발생한 후, 다시 DOM 트리의 상위 요소들로 이벤트가 전파되어 올라가는 단계이다. 이 과정에서 상위 요소들에 등록된 이벤트 리스너들이 실행될 수 있다.

이벤트 처리

• 기본적으로 대부분의 이벤트는 버블링을 통해 전파된다.
• addEventListener의 세 번째 인자로 { capture: true }를 전달하면, 캡처링 단계에서도 이벤트를 처리할 수 있다.
• event.stopPropagation() 메서드를 사용하여 특정 단계에서 이벤트의 전파를 중단할 수 있다.

결론

이벤트 전파는 DOM 구조에서 이벤트가 어떻게 상위와 하위 요소 간에 전달되는지를 정의하는 메커니즘이며, 이를 통해 복잡한 사용자 상호작용을 효율적으로 관리할 수 있다.