동료 개발자 여러분, 반갑습니다.

이벤트 버블링 및 캡처는 이벤트가 다른 요소 내부의 요소에서 발생하고 두 요소 모두 해당 이벤트에 대한 핸들을 등록한 경우 HTML DOM API에서 이벤트를 전파하는 두 가지 방법입니다.
버블링을 사용하면 이벤트가 먼저 가장 안쪽 요소에서 캡처 및 처리된 다음 외부 요소로 전파됩니다.

캡처를 사용하면 이벤트가 먼저 가장 바깥쪽 요소에 의해 캡처되고 내부 요소로 전파됩니다.
이 게시물에서는 eventListener와 함께 사용할 수 있는 선택적 인수와 이들 간의 차이점을 설명하려고 합니다. 시작하자 !

target.addEventListener(타입, 리스너[, useCapture]);

target: 수신할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.
유형: 이벤트 유형
리스너: 이벤트가 발생할 때 트리거되는 함수입니다.

useCapture(선택 사항): 이 유형의 이벤트가 DOM 트리에서 그 아래에 있는 EventTarget으로 발송되기 전에 등록된 수신기로 발송되는지 여부를 나타내는 부울입니다. 트리를 통해 위쪽으로 버블링되는 이벤트는 캡처를 사용하도록 지정된 리스너를 트리거하지 않습니다. 이벤트 버블링 및 캡처는 두 요소가 해당 이벤트에 대한 핸들을 등록한 경우 다른 요소 내에 중첩된 요소에서 발생하는 이벤트를 전파하는 두 가지 방법입니다. 이벤트 전파 모드는 요소가 이벤트를 수신하는 순서를 결정합니다. 자세한 설명은 DOM 레벨 3 이벤트 및 JavaScript 이벤트 순서를 참조하십시오. 지정하지 않으면 useCapture의 기본값은 false입니다.

이 게시물에서는 세 번째 옵션 옵션이 무엇인지 설명하려고 합니다.
그래서 우리는 서로 3개의 상자를 중첩하는 기본 레이아웃을 설정했습니다.


box-1, box-2 및 box-3에 eventListener를 추가하여 '클릭' 이벤트와 이벤트가 트리거될 때 호출될 익명 함수 내부의 콘솔 로그만 추가할 것입니다.

document.querySelector('.box-1').addEventListener('click', e => {
    console.log('Box-1 is clicked');
});

document.querySelector('.box-2').addEventListener('click', e => {
    console.log('Box-1 is clicked');
});

document.querySelector('.box-3').addEventListener('click', e => {
    console.log('Box-1 is clicked');
});

box-3을 클릭하면 어떻게 될 것 같나요? 확인 해보자.

예시 결론

.box-3을 클릭하면 이벤트가 트리거되고 콘솔 Box-3, Box-2, Bob-1에 인쇄됩니다. 따라서 그림에서 볼 수 있듯이 상단을 클릭한 요소에서 이벤트가 트리거됩니다. 이것은 Bubbling 이며 가장 안쪽 요소에서 먼저 캡처 및 처리한 다음 외부 요소로 전파됩니다.



이제 캡처를 확인해 보겠습니다. 캡처 이벤트 전파를 사용하도록 설정하려면 addEventListener에서 세 번째(선택 사항) 인수를 true로 설정해야 합니다.

document.querySelector('.box-1').addEventListener('click', e => {
    console.log('Box-1 is clicked');
}, true);

document.querySelector('.box-2').addEventListener('click', e => {
    console.log('Box-1 is clicked');
}, true);

document.querySelector('.box-3').addEventListener('click', e => {
    console.log('Box-1 is clicked');
}, true);

Box-3을 다시 클릭하고 무슨 일이 일어나는지 봅시다.

예시 결론 캡처

위의 예에서 볼 수 있듯이 Box-3을 클릭하면 Box-1이 먼저 트리거된 다음 Box-2가 트리거되고 마지막으로 클릭한 요소가 트리거됩니다. 이것이 우리가 Capturing이라고 부르는 것입니다. 위에서부터 아래로(이벤트를 트리거한 요소까지) 시작합니다.

최종 결론

기본적으로 javascript는 이벤트 전파를 Bubble로 설정합니다. 캡처를 사용하려면 addEventListener 함수의 세 번째 인수를 true로 설정해야 합니다.

코드펜 예: https://codepen.io/Clickys/pen/LBmwzw?editors=1111