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

Ereignis-Bubbling und -Erfassung spielen eine entscheidende Rolle bei der Ereignisweitergabe 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 event.

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

Trickling vs. Bubbling

Das Einfangen wird auch als „Trickling“ bezeichnet, ein Begriff, der dabei hilft, sich an die Ausbreitungsreihenfolge zu erinnern: „Riesel herab, Blase.“ up."

Browser-Unterstützung

• Netscape führte Veranstaltung ein Erfassung, während Microsoft sich für das Event-Bubbling einsetzte.
• Der W3C Document Object Model Events Standard (2000) enthielt beide Mechanismen.
• IE

Leistungsüberlegungen

Ereignisblasen können auftreten haben in komplexen DOMs im Vergleich zur Ereigniserfassung eine etwas geringere Leistung.

Verwendung

Wir verwenden die Methode addEventListener(type, listener, useCapture), um Ereignishandler in beiden Bubblings zu registrieren (Standard) oder Aufnahmemodus. Um das Erfassungsmodell zu verwenden, sollte das dritte Argument auf true gesetzt werden.

Beispiel

Bedenken Sie die folgende HTML-Struktur:

Wenn ein Klickereignis im li-Element auftritt:

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

Zusätzliche Ressourcen

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

Interaktive Demonstration

Das folgende interaktive Beispiel veranschaulicht die Erfassungs- und Bubbling-Phasen der Ereignisverbreitung:

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 
Wenn Sie auf eines der hervorgehobenen Elemente klicken, beobachten Sie zunächst die Ereigniserfassungsphase, gefolgt von der Blasenphase.