이벤트 흐름과 버블링 (Event Bubbling & Capturing)
💡 이벤트의 3단계 흐름 (Event Flow)
DOM 이벤트는 단방향으로만 전달되지 않고, 문서 최상단부터 타깃 요소까지 내려갔다가 다시 올라오는 과정을 거칩니다. 이를 이벤트 흐름이라고 부르며, 실무에서 이벤트 위임(Event Delegation)이나 이벤트 전파 방지(e.stopPropagation())를 이해하는 핵심 원리입니다.
- 1. 캡처링 단계 (Capturing Phase): 이벤트가 최상위
Window부터 타깃 요소의 부모까지 안쪽으로 파고들며 탐색합니다. - 2. 타깃 단계 (Target Phase): 이벤트가 실제 타깃 요소(버튼)에 도달하여 콜백 함수를 실행합니다.
- 3. 버블링 단계 (Bubbling Phase): 타깃에서부터 다시 최상위
Window까지 바깥으로 빠져나가며 전파됩니다.