📌 버블링

한 element에 이벤트가 발생하면, 해당 element에 할당된 핸들러가 동작하고
이어서 부모 element가 동작 가장 최상단의 element를 만날 때까지 이 과정이 반복되면서 요소에 각각에 할당된 핸들러가 동작

3개의 요소가 FORM > DIV > P 형태로 중첩된 구조

가장 안쪽의 <p>를 클릭하면 순서대로 다음과 같은 일이 벌어집니다.

1. <p>에 할당된 onclick 핸들러가 동작합니다.
2. 바깥의 <div>에 할당된 핸들러가 동작합니다.
3. 그 바깥의 <form>에 할당된 핸들러가 동작합니다.
4. document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작

이런 흐름을 이벤트 버블링이라고 부른다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 element를 거슬러 올라가며 발생하는 모양이 마치 물속 거품과 닮았기 때문이다.

거의 모든 이벤트는 버블링 된다
키워드는 ‘거의’ 입니다.

focus 이벤트와 같이 버블링 되지 않는 이벤트도 있습니다.
버블링 되지 않는 이벤트의 종류에 대해선 조금 후에 알아보겠습니다.
몇몇 이벤트를 제외하곤 대부분의 이벤트는 버블링 됩니다.

📌 캡처링

표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있다
1. 캡처링 단계 - 이벤트가 하위 요소로 전파되는 단계
2. 타깃 단계 - 이벤트가 실제 타깃 요소로 전달되는 단계
3. 버블링 단계 - 이벤트가 상위 요소로 전파되는 단계

테이블 안의 를 클릭하면 어떻게 이벤트가 흐르는지 아래 그림을 보고 이해해 봅시다.

<td>를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파되고(캡처링 단계), 이벤트가 타깃 요소에 도착해 실행된 후(타깃 단계), 다시 위로 전파됩니다(버블링 단계). 이런 과정을 통해 요소에 할당된 이벤트 핸들러가 호출됩니다.

캡처링 단계를 이용해야 하는 경우는 흔치 않기 때문에, 이전까진 주로 버블링만 설명했습니다. 캡처링에 관한 코드를 발견하는 일은 거의 없을 겁니다.

on<event> 프로퍼티나 HTML 속성, addEventListener(event, handler)를 이용해 할당된 핸들러는 캡처링에 대해 전혀 알 수 없습니다. 이 핸들러들은 두 번째 혹은 세 번째 단계의 이벤트 흐름(타깃 단계와 버블링 단계)에서만 동작합니다.

캡처링 단계에서 이벤트를 잡아내려면 addEventListener의 capture 옵션을 true로 설정해야 합니다.