Ereignissprudeln vs. Ereigniserfassung: Wie wirken sich Ereignisausbreitungsmodi auf die DOM-Ereignisbehandlung aus?

Ereignis-Bubbling und -Erfassung: Die Ausbreitung im DOM verstehen

Ereignis-Bubbling und -Erfassung spielen eine entscheidende Rolle bei der Ereignisverbreitung innerhalb der HTML-DOM-API. Um ihre Funktionalität zu verstehen, wollen wir uns mit den Feinheiten dieser beiden Konzepte befassen.

Event Bubbling vs. Event Capturing

Wenn ein Ereignis in einem Element auftritt, das in einem anderen Element verschachtelt ist und beide Elemente über registrierte Ereignishandler für dieses bestimmte Ereignis verfügen, bestimmt der Ereignisausbreitungsmodus die Reihenfolge, in der die Elemente das empfangen Ereignis.

• Ereignis-Bubbling:Das Ereignis wird zunächst vom innersten Element erfasst und verarbeitet und dann nach außen an seine übergeordneten Elemente weitergegeben.
• Ereignis Erfassung: Das Ereignis wird zunächst vom äußersten Element erfasst und nach innen an sein verschachteltes Element weitergegeben Elemente.

Rieseln vs. Sprudeln

Einfangen wird auch als „Rieseln“ bezeichnet, ein Begriff, der dabei hilft, sich an die Ausbreitungsreihenfolge zu erinnern: „Rieseln nach unten, Blasen“. up."

Browser Unterstützung

• Netscape führte die Ereigniserfassung ein, während Microsoft sich für das Event-Bubbling einsetzte.
• W3C Document Object Model Events Standard (2000) integrierte beides.
• IE < ; 9 verwendet ausschließlich Event-Bubbling, während IE9 und andere große Browser beide Mechanismen unterstützen.

Überlegungen zur Leistung

Event-Bubbling kann in komplexen DOMs im Vergleich zu einer etwas geringeren Leistung führen zur Veranstaltung Erfassung.

Verwendung

Wir verwenden die Methode addEventListener(type, listener, useCapture), um Ereignishandler entweder im Bubbling- (Standard) oder im Erfassungsmodus zu registrieren. Um das Erfassungsmodell zu verwenden, sollte das dritte Argument auf true gesetzt werden.

Beispiel

Bedenken Sie die folgende HTML-Struktur:

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

If Im li-Element tritt ein Klickereignis auf:

• Im Aufnahmemodus wird das Ereignis zunächst vom verarbeitet div, gefolgt von ul und schließlich li.
• Im Bubbling-Modus wird das Ereignis zuerst von li, dann von ul und zuletzt von div verarbeitet.

Zusätzliche Ressourcen

• [Veranstaltungsbestellung am QuirksMode](https://www.quirksmode.org/js/events_order.html)
• [addEventListener auf MDN](https://developer.mozilla.org/en-US/docs/Web/API /EventTarget/addEventListener)
• [Ereignisse erweitert auf QuirksMode](https://www.quirksmode.org/js/events/)

Interaktive Demonstration

Das folgende interaktive Beispiel veranschaulicht das Einfangen und Sprudeln Phasen der Ereignisausbreitung:

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);
}

Wenn Sie auf eines der hervorgehobenen Elemente klicken, beobachten Sie die Ereigniserfassung Zuerst tritt die Phase auf, gefolgt von der Blasenphase.

Das obige ist der detaillierte Inhalt vonEreignissprudeln vs. Ereigniserfassung: Wie wirken sich Ereignisausbreitungsmodi auf die DOM-Ereignisbehandlung aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!