Detaillierte Analyse des Event-Bubbling-Mechanismus in JavaScript

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!

Das könnte Sie auch interessieren:
  • Eine kurze Analyse von Event Bubbling und Event Capture in js
  • Einführung in Event Bubbling und Event Capture in JS
  • Detaillierte Erläuterung von JS-Bubbling-Ereignissen und Beispielen zur Ereigniserfassung
  • Detaillierte Erklärung der JS-Ereignisdelegation
  • JavaScript fügt Ereignis-Listener zur Ereignisdelegierung in Batches hinzu. Detaillierter Prozess
  • Detaillierte Erklärung zum Javascript-Event-Bubbling, Event-Capture und Event-Delegation

<<:  Beispiele für optimistisches und pessimistisches Sperren in MySQL

>>:  Zusammenfassung der MySQL-Zeitstatistikmethoden

Artikel empfehlen

Was sind die Attribute des JSscript-Tags

Was sind die Attribute des JS-Skript-Tags: charse...

Zusammenfassung der Anwendungsbereiche von Kubernetes

Kubernetes ist aufgrund seiner Anwendungsportabil...

Detaillierte Erläuterung der Javascript-Wissenspunkte

Inhaltsverzeichnis 1. Grundlegende Einführung in ...

Überblick und Einführung in das Linux-Betriebssystem

Inhaltsverzeichnis 1. Was ist ein Betriebssystem?...

Vue Storage enthält eine Lösung für Boolesche Werte

Vue speichert Speicher mit Booleschen Werten Ich ...

So passen Sie Docker-Images mit Dockerfile an

Anpassen von Bildern mit Dockerfile Unter Bildanp...

Allgemeine Schreibbeispiele für MySQL- und Oracle-Batch-Insert-SQL

Inhaltsverzeichnis Zum Beispiel: Allgemeines Schr...

Eingabetyp begrenzen (mehrere Methoden)

1. Es können nur chinesische Schriftzeichen eingeg...

W3C Tutorial (8): W3C XML Schema Aktivitäten

XML Schema ist eine XML-basierte Alternative zu D...

MySQL 8.0.13 Download- und Installations-Tutorial mit Bildern und Text

MySQL ist die am häufigsten verwendete Datenbank....

Empfehlen Sie mehrere MySQL-bezogene Tools

Vorwort: Mit der kontinuierlichen Entwicklung der...

Zwei praktische Möglichkeiten zum Aktivieren des Proxys in React

Zwei Möglichkeiten zum Aktivieren des Proxy React...