Der Unterschied zwischen JavaScript-Event-Bubbling und Event-Capturing

Was ist der Unterschied zwischen js Event Bubbling und Capture? Sie benötigen spezifische Codebeispiele

Event Bubbling und Event Capture sind die beiden Phasen der Ereignisverarbeitung in JavaScript. Bevor wir sie verstehen, müssen wir verstehen, was DOM-Ereignisse sind.

Wenn Benutzer in HTML mit Elementen auf der Seite interagieren, z. B. auf Schaltflächen klicken, Fenster scrollen usw., werden diese Verhaltensweisen als Ereignisse bezeichnet. Das DOM-Ereignis (Document Object Model) bezieht sich auf den JavaScript-Code, der ausgeführt wird, wenn das Ereignis eintritt.

In JavaScript können Ereignishandler über addEventListener oder durch direktes Zuweisen von Methoden zu Attributen des Elements an Elemente gebunden werden. Unabhängig davon, welche Methode verwendet wird, werden Ereignisse in einer bestimmten Reihenfolge an und von Elementen weitergegeben.

Als nächstes werfen wir einen tieferen Blick auf Event-Bubbling und Event-Capturing und geben konkrete Codebeispiele.

Ereignissprudeln:
Ereignissprudeln bedeutet, dass Ereignisse beginnen, sich vom innersten Element auszubreiten und sich Schritt für Schritt nach außen zum äußersten Element auszubreiten. Das heißt, das Ereignis wird zuerst für das aktuelle Element ausgelöst und dann an das übergeordnete Element bis hin zum äußersten Element weitergegeben.

Zum Beispiel haben wir ein übergeordnetes Element div mit der folgenden HTML-Struktur und seinem untergeordneten Element span:

<div id="parent">
  <span id="child">Hello World!</span>
</div>

Wenn wir dem untergeordneten Element span ein Klickereignis hinzufügen, wie unten gezeigt:

var child = document.getElementById('child');
child.addEventListener('click', function() {
  console.log('child element clicked!');
});

Wenn wir auf das untergeordnete Element klicken Elementspanne werden Ereignisse in der folgenden Reihenfolge weitergegeben:

1. Das Klickereignis für die untergeordnete Elementspanne wird ausgelöst und „Untergeordnetes Element angeklickt!“ wird ausgegeben.
2. Das Ereignis wird an das übergeordnete Element div weitergegeben und das übergeordnete Element führt auch den entsprechenden Ereignishandler aus (falls vorhanden).
3. Wenn es übergeordnete Elemente gibt, wird das Ereignis an das äußerste Element übergeben.

Ereigniserfassung:
Ereigniserfassung bedeutet, dass Ereignisse beginnen, sich vom äußersten Element auszubreiten und sich Schritt für Schritt nach innen zum innersten Element auszubreiten. Das heißt, das Ereignis wird zuerst auf dem äußersten Element ausgelöst und breitet sich dann auf untergeordnete Elemente bis zum innersten Element aus.

Um die Ereigniserfassung in JS zu implementieren, müssen wir beim Hinzufügen eines Ereignis-Listeners einen optionalen Parameter namens useCapture übergeben. Standardmäßig ist der Wert von useCapture falsch, d. h. das Ereignis wird sprudelnd weitergegeben. Wenn wir useCapture auf true setzen, werden Ereignisse auf erfasste Weise weitergegeben.

Zum Beispiel haben wir ein übergeordnetes Element div mit der folgenden HTML-Struktur und seinem untergeordneten Element span:

<div id="parent">
  <span id="child">Hello World!</span>
</div>

Wenn wir dem übergeordneten Element div wie folgt ein Klickereignis hinzufügen:

var parent = document.getElementById('parent');
parent.addEventListener('click', function() {
  console.log('parent element clicked!');
}, true);

Wenn wir auf das untergeordnete Element span klicken , Ereignisse werden in der folgenden Reihenfolge weitergegeben:

1. Das Klickereignis für das äußerste Element-Div wird ausgelöst und „Übergeordnetes Element angeklickt!“ wird ausgegeben.
2. Das Ereignis wird nach innen an die Spanne des untergeordneten Elements weitergegeben, und das untergeordnete Element führt auch den entsprechenden Ereignishandler aus (falls vorhanden).

Es ist zu beachten, dass die Reihenfolge der Ereignisausbreitung zwar umgekehrt werden kann, das Bubbling von Ereignissen jedoch häufig verwendet wird.

Zusammenfassend lässt sich sagen, dass Event-Bubbling und Event-Capturing die beiden Phasen der Ereignisverarbeitung in JavaScript sind. Das Verständnis ihrer Unterschiede und Verwendung kann uns helfen, die Zustellung und Verarbeitung von Ereignissen besser zu steuern. In der tatsächlichen Entwicklung können wir je nach Bedarf Event-Bubbling oder Event-Capturing verwenden oder beide gleichzeitig verwenden, um komplexe Ereignislogik zu verarbeiten.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen JavaScript-Event-Bubbling und Event-Capturing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!