캡쳐링

표준 DOM이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있다.

1. 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계
2. 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계
3. 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계

이벤트가 발생하면 캡처링부터 시작하여 이벤트가 발생한 가장 안쪽의 요소노드까지 이벤트가 발생한다. 이후에는 버블링단계로 가장 바같의 요소노드까지 이벤트가 전파된다.

요소노드의 on< event >프로퍼티나 HTML 인라인속성으로 할당된 핸들러는 캡처링단계에서 발생된 이벤트를 처리할 수 없다. 오직 버블링단계에서 실행되는 핸들러들이다.

캡처링단계에서 핸들러를 실행하려면 addEventListener메소드의 세번째 인자 capture옵션을 true로 설정해야 한다.

elem.addEventListener(..., {capture: true})
elem.addEventListener(..., true)