Detaillierte Analyse des Event-Bubbling-Mechanismus in JavaScript

Was ist Blubbern?

Es gibt drei Phasen im DOM-Ereignisfluss: Ereigniserfassungsphase, Zielphase und Ereignis-Bubbling-Phase.

Ereigniserfassung: Einfach ausgedrückt, wenn ein Mausklick erfolgt oder ein DOM-Ereignis ausgelöst wird, leitet der Browser das Ereignis vom Stammknoten von außen nach innen weiter. Das heißt, wenn auf ein untergeordnetes Element geklickt wird und das übergeordnete Element das entsprechende Ereignis durch Ereigniserfassung registriert hat, wird zuerst das an das übergeordnete Element gebundene Ereignis ausgelöst.

Event Bubbling (auch Bubbling genannt): Im Gegensatz zur Event Capture handelt es sich beim Event Bubbling um eine Ereignisausbreitung von innen nach außen zum Stammknoten.

Die Auslösereihenfolge des DOM-Standardereignisflusses lautet: Erst erfassen, dann sprudeln. Das heißt, wenn ein DOM-Ereignis ausgelöst wird, wird das Ereignis zuerst erfasst und dann, nachdem die Ereignisquelle erfasst wurde, durch die Ereignisausbreitung gesprudelt. Verschiedene Browser haben hierfür unterschiedliche Implementierungen. IE10 und darunter unterstützen keine Erfassungsereignisse, daher gibt es eine Ereigniserfassungsphase weniger. IE11, Chrome, Firefox, Safari und andere Browser verfügen alle über diese Funktion.

addEventListener() Methode

Diese Methode setzt einen Ereignis-Listener und führt Aktionen mit den angegebenen Parametern aus, wenn ein bestimmtes Ereignis eintritt. Die Syntax lautet:

addEventListener(Ereignis, Funktion, useCapture)

Der Parameter „event“ ist erforderlich und gibt das zu überwachende Ereignis an, z. B. Klicken, Touchstart usw. Dies sind die Ereignisse ohne das Präfix „on“.

Außerdem ist der Funktionsparameter erforderlich, der die Funktion angibt, die nach Auslösen des Ereignisses aufgerufen werden soll. Es kann sich um eine extern definierte Funktion oder eine anonyme Funktion handeln.

Der Parameter useCapture ist optional. Sie können true oder false eingeben, um zu beschreiben, ob das Ereignis sprudelt oder erfasst. true bedeutet Erfassung, und der Standardwert false bedeutet sprudelt.

Ereignis-Listener entfernen

Wenn Sie den von addEventListener() hinzugefügten Event-Listener entfernen möchten, müssen Sie removeEventListener() verwenden. Die Syntax lautet:

removeEventListener(Ereignis, Funktion)

Die Parameter sind dieselben wie bei addEventListener().

Kompatibilität

IE 8 und früher sowie Opera 7.0 und früher unterstützen die Methoden addEventListener() und removeEventListener() nicht. Sie verwenden stattdessen die folgenden Methoden:

Ereignis hinzufügen:

AttachEvent(Ereignis, Funktion)

Ereignis entfernen:

**detachEvent(Ereignis, Funktion) **

Kompatibilitätsprobleme können auf folgende Weise gelöst werden:

wenn (div1.addEventListener) {
         div1.addEventListener('klicken', Funktion () {
             console.log("Unterstützung")
         });
} sonst wenn (div1.attachEvent) {
         div1.attachEvent('beimKlick', Funktion () {
             console.log("Nicht unterstützt")
         });
}

Der spezifische Unterschied zwischen Blubbern und Erfassen

HTML

    <div id="div1">
         <div id="div2"></div>
    </div>

JS

<Skript>
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.addEventListener('klicken',Funktion(){
            console.log("div1 – Erfassungsphase")
        },WAHR);
        div2.addEventListener('klicken',Funktion(){
            console.log("div2 – Erfassungsphase")
        },WAHR);
        div1.addEventListener('klicken',Funktion(){
            console.log("div1 – Blasenphase")
        });
        div2.addEventListener('klicken',Funktion(){
            console.log("div2 – Blasenphase")
        });
</Skript>

Ausgabeergebnis (das Ergebnis der Ausführung, wenn auf div2 geklickt wird)

Lösung

Funktion stopBubble(e) {
         wenn (e && e.stopPropagation) {
                e.stopPropagation(); //Es unterstützt also die stopPropagation()-Methode des W3C } else {
             window.event.cancelBubble = true; //Andernfalls müssen wir die IE-Methode verwenden, um das Event-Bubbling abzubrechen}
}

Zusammenfassen

Dies ist das Ende dieses Artikels über den Event-Bubbling-Mechanismus in JavaScript. Weitere relevante Inhalte zum Event-Bubbling in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!