버블링과 캡처링

캡처링 (Capturing Phase)

이건 이벤트가 DOM 트리의 최상단(HTML 문서 자체)부터 시작해서 이벤트가 발생한 요소(타겟)까지 내려가는 과정이다.

근데 보통 캡처링 단계에서 이벤트 핸들러를 추가하는 경우는 적다.. 왜냐면 캡처링은 그렇게 잘 쓰이지 않기 때문이다.

 

버블링 (Bubbling Phase)

이건 반대로 이벤트가 타겟 요소에서 발생한 후, 그 이벤트가 부모 요소로 점점 올라가는 과정이다.

버블링은 캡처링보다 훨씬 자주 사용된다. 왜냐하면, 대부분의 이벤트 핸들링은 이 단계에서 처리되니까!

 

document.addEventListener("click", handler, true); // 캡처링
document.addEventListener("click", handler, false); // 버블링

기본값은 버블링(false)이다.

 

정리하면,

• 캡처링은 위에서 아래로 내려가는 거.
• 버블링은 아래에서 위로 올라가는 거.