🙋 이벤트 전파
이벤트가 어떤 방식으로 전파되는지를 설명하는 개념
☝️ 캡처링 단계
이벤트가 DOM 트리의 최상위 요소에서 시작해서 이벤트가 발생한 요소로 향해 내려가는 단계
내려가는 과정에서 상위 요소들에 이벤트 리스너가 있으면 그 순서대로 실행될 수 있다.
✌️ 타겟 단계
이벤트가 실제로 발생한 타겟 요소에 도달하는 단계
타겟 요소에 등록되어 있는 이벤트 리스너가 실행된다.
🤙 버블링 단계
타겟 요소에서 이벤트가 발생한 후에 다시 DOM 트리의 상위 요소들로 이벤트가 전파되어 올라가는 단계
올라가는 과정에서 상위 요소들에 등록된 이벤트 리스너가 실행될 수 있다.
대부분의 이벤트는 보통 버블링을 통해서 전파됨
but, addEventListener()의 3번째 인자로 { capture: true } 를 전달하게 되면 캡처링 단계에서도 이벤트를 처리할 수 있다.
이벤트 전파가 정상 동작에 방해가 된다면 event.stopPropagation() 메서드를 사용해서 특정 단계에서 이벤트 전파를 중단할 수 있다.
🎬 결론
이벤트 전파는 DOM 구조에서 이벤트가 어떻게 상위와 하위 요소 간에 전달되는지를 정의하는 메커니즘이고, 이벤트 전파를 통해서 사용자 상호작용을 효율적으로 관리할 수 있다.
