JavaScript에서 이벤트 버블링과 캡처링

이벤트 버블링 외에도 캡처링이 있습니다. 사실, 이벤트는 먼저 위에서 아래로 이동하며 (캡처링 단계), 우리 요소에 도달한 후 (타겟 단계)에야 비로소 버블링되기 시작합니다 (버블링 단계).

캡처링 단계에서 이벤트 핸들러를 등록하기 위해 addEventListener에는 세 번째 선택적 매개변수가 있습니다. 이 값이 true이면 이벤트는 캡처링 단계에서 발생하고, false이면 버블링 단계에서 발생합니다(기본값). 예제를 살펴보겠습니다:

javascriptelem1.addEventListener('click', function() {
  console.log('녹색 - 캡처링');
}, true);
elem1.addEventListener('click', function() {
  console.log('녹색 - 버블링');
}, false);

elem2.addEventListener('click', function() {
  console.log('파란색 - 캡처링');
}, true);
elem2.addEventListener('click', function() {
  console.log('파란색 - 버블링');
}, false);

elem3.addEventListener('click', function() {
  console.log('빨간색 - 캡처링');
}, true);
elem3.addEventListener('click', function() {
  console.log('빨간색- 버블링');
}, false);

확인해 보세요: