Event Capturing

이벤트 캡쳐링이란 이벤트 버블링과 다르게 제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것을 말합니다.

이벤트의 3단계 흐름

이벤트 캡처링을 더 자세히 보기 위해서 이벤트의 3단계 흐름을 살펴보겠습니다.
1. 캡처링 단계 - 이벤트가 하위 요소로 전파되는 단계
2. 타깃 단계 - 이벤트가 실제 타깃 요소에 전달되는 단계
3. 버블링 단계 - 이벤트가 상위 요소로 전파되는 단계

만약 요소를 클릭하면 위와 같이 이벤트가 흐르게 됩니다.
1. 요소를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파됩니다(캡처링 단계)
2. 그리고 이벤트가 타깃 요소에 도착해 실행됩니다(타깃 단계)
3. 다시 위로 전파됩니다(버블링 단계)
이런 과정을 통해 요소에 할당된 이벤트 핸들러가 호출됩니다.

코드로 이벤트 흐름 살펴보기

버블링의 흐름을 알기 위해서는 중첩된 요소들에 핸들러를 넣어서 확인했습니다.
그러면 가장 안에 있는 것부터 핸들러가 호출이 되어서 버블링의 흐름을 확인했습니다.

그럼 캡처링의 흐름을 확인하려면 어떻게 해야 할까요?
addEventListener의 capture 옵션을 true로 설정해야 합니다.