버블링 및 캡처는 DOM 이벤트가 전파하는 데 사용하는 두 가지 모델입니다.

DOM 구조가

<div id="container">
  <button>Click me</button>
</div>

사용자가 버튼을 클릭 한 시간을 추적하려고 하는데 하나의 버튼과 하나의 #container에 두 개의 이벤트 리스너가 있습니다.

전파를 중지하지 않으면 하위 요소를 클릭하면 항상 상위 요소로 전파됩니다 (나중에 참조).

이러한 이벤트 리스너는 순서대로 호출되며 이 순서는 사용 된 이벤트 버블링 / 캡처 모델에 의해 결정됩니다.

Bubbling은 클릭 한 항목 (자식)에서 가장 가까운 트리부터 시작하여 모든 상위 트리까지 이벤트가 전파됨을 의미합니다.

이 예에서 핸들러 켜기 버튼은 #container 핸들러보다 먼저 실행됩니다.

Capturing는 반대입니다. 외부 이벤트 핸들러는 버튼에 있는 하나의 특정 핸들러보다 먼저 실행됩니다.

기본적으로 모든 이벤트가 버블링됩니다. 

addEventListener에 세 번째 인수를 적용하여 true로 설정하여 이벤트 캡처를 채택하도록 선택할 수 있습니다.

document.getElementById('container').addEventListener(
  'click',
  () => {
    //window loaded
  },
  true
)

먼저 모든 캡처 이벤트 핸들러가 실행됩니다.

그런 다음 모든 버블링 이벤트 핸들러.

순서는 이 원칙을 따릅니다. DOM은 Window 객체에서 시작하여 모든 요소를 ​​거치고 클릭 한 항목을 찾습니다. 그렇게 하는 동안 이벤트와 관련된 이벤트 핸들러를 캡처합니다 (캡처 단계).

대상에 도달하면 Window 개체까지 부모 트리까지 이동을 반복하고 이벤트 처리기를 다시 호출합니다 (버블링 단계).