이벤트 버블링 및 캡처: DOM의 전파 이해

이벤트 버블링 및 캡처는 HTML DOM API 내에서 이벤트 전파에 중요한 역할을 합니다. 해당 기능을 이해하기 위해 이 두 가지 개념의 복잡성을 자세히 살펴보겠습니다.

이벤트 버블링과 이벤트 캡처

다른 요소 내에 중첩된 요소에서 이벤트가 발생할 때 , 두 요소 모두 해당 특정 이벤트에 대한 이벤트 핸들러를 등록한 경우 이벤트 전파 모드에 따라 요소가 이벤트를 수신하는 순서가 결정됩니다. event.

• 이벤트 버블링: 이벤트는 처음에 가장 안쪽 요소에 의해 캡처 및 처리된 다음 상위 요소로 바깥쪽으로 전파됩니다.
• 이벤트 캡처: 이벤트는 가장 바깥쪽 요소에 의해 먼저 캡처되고 중첩된 요소로 내부로 전파됩니다. elements.

살수 vs. 버블링

캡처는 '살수'라고도 알려져 있으며 전파 순서를 기억하는 데 도움이 되는 용어입니다. up."

브라우저 지원

• Netscape Microsoft는 이벤트 버블링을 옹호했으며 Microsoft는 이벤트 버블링을 옹호했습니다.
• W3C Document Object Model Events 표준(2000)은 두 가지를 모두 통합했습니다.
• IE

성능 고려 사항

이벤트 버블링은 이벤트 캡처에 비해 복잡한 DOM에서 성능이 약간 낮을 수 있습니다.

사용법

addEventListener(type, Listener, useCapture) 메서드를 사용하여 이벤트 핸들러를 등록합니다. 버블링(기본값) 또는 캡처 모드 중 하나입니다. 캡처 모델을 사용하려면 세 번째 인수를 true로 설정해야 합니다.

예

다음 HTML 구조를 고려하세요.

li 요소에서 클릭 이벤트가 발생하는 경우:

• 캡처 모드에서 이벤트는 먼저 div에 의해 처리되고, 그 다음에는 ul, 마지막으로 li.
• 버블링 모드에서 이벤트는 먼저 li에 의해 처리된 다음 ul에 의해 처리되고 마지막으로 div.

추가 리소스

• [QuirksMode의 이벤트 순서](https://www.quirksmode.org/js/events_order.html )
• [addEventListener 켜짐 MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
• [QuirksMode의 고급 이벤트](https://www.quirksmode.org/ js/events/)

대화형 데모

다음 대화형 예제에서는 이벤트 전파의 캡처 및 버블링 단계를 보여줍니다.

var logElement = document.getElementById('log');

function log(msg) {
    logElement.innerHTML  = ('
'   msg   '
');
}

function capture() {
    log('capture: '   this.firstChild.nodeValue.trim());
}

function bubble() {
    log('bubble: '   this.firstChild.nodeValue.trim());
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i 
강조 표시된 요소를 클릭할 때 먼저 발생하는 이벤트 캡처 단계와 버블링 단계가 뒤따르는 것을 관찰하세요.