이벤트 버블링과 캡처: 이벤트 전파 모드가 DOM 이벤트 처리에 어떤 영향을 미칩니까?

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

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

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

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

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

살수 vs. 버블링

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

브라우저 지원

• Netscape는 이벤트 캡처를 도입했고 Microsoft는 이벤트 버블링을 옹호했습니다.
• W3C Document Object Model Events 표준(2000)은 두 가지를 모두 통합했습니다.
• IE < ; 9는 이벤트 버블링을 독점적으로 사용하는 반면 IE9 및 기타 주요 브라우저는 두 가지 메커니즘을 모두 지원합니다.

성능 고려 사항

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

사용

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

예

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

<div>
    <ul>
        <li></li>
    </ul>
</div>

If li 요소에서 클릭 이벤트가 발생합니다.

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

추가 자료

• [이벤트 주문 QuirksMode](https://www.quirksmode.org/js/events_order.html)
• [MDN에 EventListener 추가](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 += ('<p>' + msg + '</p>');
}

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 < divs.length; i++) {
    divs[i].addEventListener('click', capture, true);
    divs[i].addEventListener('click', bubble, false);
}

강조 표시된 요소를 클릭할 때 이벤트 캡처 단계가 먼저 발생하고 이어서 버블링 단계가 발생합니다.

위 내용은 이벤트 버블링과 캡처: 이벤트 전파 모드가 DOM 이벤트 처리에 어떤 영향을 미칩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!