Warum wird das Event-Bubbling mehrmals ausgelöst?

Warum wird das Event Sprudeln zweimal ausgelöst?

In der Frontend-Entwicklung stoßen wir häufig auf das Konzept des Event-Bubblings. Ereignis-Bubbling bedeutet, dass, wenn ein bestimmtes Ereignis eines Elements auf der Seite ausgelöst wird, das Ereignis Schicht für Schicht an das obere Element weitergeleitet wird, bis es schließlich an das Dokumentobjekt übergeben wird.

Allerdings kann es manchmal vorkommen, dass Ereignisse zweimal sprudeln und ausgelöst werden, selbst wenn wir den Ereignis-Listener nur einmal binden. Warum tritt also das Phänomen der wiederholten Auslösung auf? Lassen Sie uns weiter unten auf die möglichen Gründe eingehen.

Zunächst müssen wir das Konzept klären, wie Event-Bubbling im Browser funktioniert. Wenn der Browser ein bestimmtes Ereignis für ein Element auslöst, durchläuft er ausgehend vom Element den DOM-Baum und prüft, ob für jedes übergeordnete Element ein Ereignishandler an das Ereignis gebunden ist. Wenn ein Ereignishandler gefunden wird, führt der Browser den Handler aus und setzt den Durchlauf bis zum Dokumentobjekt fort. Dieser Prozess ist ereignissprudelnd.

Es ist jedoch wichtig zu beachten, dass das Ereignis-Bubbling nicht nur an übergeordnete Elemente, sondern auch an Vorgängerelemente weitergegeben wird. Das heißt, das Ereignis-Bubbling löst wiederholt Ereignishandler für übergeordnete und übergeordnete Elemente aus. Dies kann dazu führen, dass das Ereignis zweimal ausgelöst wird.

Die Frage ist also, warum das Ereignissprudeln auf Vorfahrenelemente übergeht? Dies liegt daran, dass wir beim Binden von Ereignis-Listenern normalerweise die Ereignisdelegierung verwenden. Das heißt, binden Sie den Ereignis-Listener an das übergeordnete Element und lassen Sie dann das übergeordnete Element das Ereignis anstelle seines untergeordneten Elements durch Ereignisblasen verarbeiten.

Wenn der von uns gebundene Ereignis-Listener sowohl im übergeordneten Element als auch im Vorgängerelement vorhanden ist, wird das Ereignis-Bubbling zweimal ausgelöst. Dies liegt daran, dass der Browser beim Durchlaufen des DOM-Baums prüft, ob an jedes übergeordnete Element und Vorgängerelement derselbe Ereignishandler gebunden ist. Falls vorhanden, werden sie vom Browser ausgeführt.

Um dieses Problem besser zu verstehen, finden Sie unten ein spezifisches Codebeispiel:

HTML-Code:

<div id="parent">
  <div id="child">Click me!</div>
</div>

JavaScript-Code:

var parent = document.getElementById('parent');
var child = document.getElementById('child');

parent.addEventListener('click', function() {
  console.log('Parent Clicked!');
});

child.addEventListener('click', function() {
  console.log('Child Clicked!');
});

Im obigen Code haben wir sowohl auf das übergeordnete als auch auf das untergeordnete Element geklickt Der Ereignis-Listener für das Ereignis. Wenn wir auf das untergeordnete Element klicken, gibt die Konsole die Ergebnisse zweimal aus: „Untergeordnetes Element angeklickt!“ und „Übergeordnetes Element angeklickt!“. Dies liegt daran, dass das Ereignis-Bubbling zweimal ausgelöst wird: Zuerst wird der Ereignis-Listener des untergeordneten Elements ausgeführt, und dann wird der Ereignis-Listener des übergeordneten Elements ausgeführt.

Um das Problem zu vermeiden, dass die Ereignisblase zweimal ausgelöst wird, können wir die Methode stopPropagation() verwenden, um zu verhindern, dass das Ereignis weiter sprudelt. Im obigen Code können wir beispielsweise eine Codezeile zum Ereignis-Listener des untergeordneten Elements hinzufügen:

child.addEventListener('click', function(event) {
  console.log('Child Clicked!');
  event.stopPropagation();
});

Nach Verwendung der stopPropagation()-Methode wird nur der Ereignis-Listener des untergeordneten Elements und das Ereignis ausgeführt Der Listener des übergeordneten Elements wird nicht erneut ausgeführt. Auf diese Weise können wir das Problem vermeiden, dass Ereignisse zweimal sprudeln und ausgelöst werden.

Zusammenfassend lässt sich sagen, dass der Grund dafür, dass das Ereignis-Bubbling zweimal ausgelöst wird, darin besteht, dass das Ereignis-Bubbling an Ereignishandler für übergeordnete und Vorgängerelemente übergeben wird. Um dieses Problem zu lösen, können wir die Methode stopPropagation() verwenden, um zu verhindern, dass das Ereignis nach oben sprudelt.

Ich hoffe, dass die Leser durch die Einführung dieses Artikels ein umfassenderes Verständnis des Prinzips des Event-Bubblings und der Gründe dafür erlangen, warum es zweimal ausgelöst wird, und effektive Lösungen finden können, wenn dieses Problem in der tatsächlichen Entwicklung auftritt.

Das obige ist der detaillierte Inhalt vonWarum wird das Event-Bubbling mehrmals ausgelöst?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!