Event Capturing

Event Bubbling과는 반대로 제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것

Capturing 확인

addEventListener의 capture 옵션 true

---

Event Flow

이벤트 발생 시 크게 3단계 흐름

1. 캡처링 : 이벤트가 하위 요소로 전파되는 단계

2. 타깃 : 이벤트가 실제 타깃 요소에 전달되는 단계

3. 버블링 : 이벤트가 상위 요소로 전파되는 단계

td 요소 클릭하게 된다면

이벤트가 최상위 조상에서 시작해 아래로 전파 (캡처링)

이벤트 타깃 요소에 도착해 실행 (타깃)

다시 위로 전파(버블링)

=> 위와 같은 과정으로 이벤트 핸들러가 호출

---

*preDefault() : 이벤트 기본 동작 방지

이벤트 흐름을 중지하지는 않음

*stopPropagation() : DOM 트리 통한 이벤트 흐름 중지

브라우저 기본 동작 취소하지는 않음