Heim > Artikel > Web-Frontend > Warum sprudeln Ereignisse auf und werden mehrmals ausgelöst?

Warum sprudeln Ereignisse auf und werden mehrmals ausgelöst?

王林Original: 2024-02-19 15:46:06560Durchsuche

Warum wird das Event Sprudeln zweimal ausgelöst?

Event-Bubbling ist ein häufiges Phänomen in der Webentwicklung. Es bedeutet, dass, wenn ein Ereignis auf einem Element ausgelöst wird, das Ereignis aus dem Element hervortritt und wiederum dasselbe Ereignis auf seinem übergeordneten Element auslöst. Manchmal stellen wir jedoch fest, dass ein Ereignis während des Blasenbildungsprozesses zweimal ausgelöst wird. Um besser zu verstehen, warum dies geschieht, müssen wir mit dem Prinzip des Event-Bubbling beginnen und es anhand konkreter Codebeispiele analysieren.

Das Prinzip des Event-Bubblings basiert auf der DOM-Baumstruktur. In einem HTML-Dokument sind alle Elemente entsprechend ihrer verschachtelten Beziehung in einer Baumstruktur organisiert. Wenn ein Ereignis ausgelöst wird, sprudelt das Ereignis von dem Element, in dem das Ereignis aufgetreten ist, entlang seines übergeordneten Elements nach oben, bis es das Stammelement erreicht. Während des Bubbling-Prozesses löst das Ereignis nacheinander für jedes übergeordnete Element denselben Ereignishandler aus. Der Vorteil dieses Designs besteht darin, dass die Ereignisdelegierungsverarbeitung einfach durchgeführt werden kann und ein natürlicher Ereignisfluss erreicht werden kann.

Allerdings wird das Event-Bubbling zweimal ausgelöst, hauptsächlich aufgrund einer fehlerhaften Bindung der Event-Verarbeitungsfunktion oder eines mangelhaften Event-Verhinderungsmechanismus. Schauen wir uns ein konkretes Codebeispiel an:

<!DOCTYPE html>
<html>
<head>
  <title>事件冒泡示例</title>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <button id="btn">Click me!</button>
    </div>
  </div>

  <script>
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    var btn = document.getElementById('btn');

    outer.addEventListener('click', function() {
      console.log('Outer clicked!');
    });

    inner.addEventListener('click', function() {
      console.log('Inner clicked!');
    });

    btn.addEventListener('click', function() {
      console.log('Button clicked!');
      event.stopPropagation();
    });
  </script>
</body>
</html>

In diesem Beispiel haben wir ein div-Element mit zwei verschachtelten Ebenen und eine Schaltfläche, die im innersten div verschachtelt ist. Wir binden einen Click-Event-Handler an jedes div-Element und jede Schaltfläche und geben die entsprechenden Informationen an die Konsole aus.

Wenn wir auf die Schaltfläche klicken, können wir erwarten, dass „Schaltfläche angeklickt!“ nur einmal ausgegeben wird, aber tatsächlich werden wir feststellen, dass sie zweimal ausgegeben wird. Dies liegt daran, dass das Ereignis während des Event-Bubbling-Prozesses nacheinander den Event-Handler für jedes übergeordnete Element auslöst. Das heißt, wenn auf die Schaltfläche geklickt wird, wird zuerst der Click-Event-Handler für die Schaltfläche und dann das innerste div-Element ausgelöst wird wiederum ausgelöst und die Event-Handler-Funktion für das äußerste div-Element. Da wir die Methode event.stopPropagation() im Ereignishandler der Schaltfläche aufgerufen haben, verhindert diese Methode, dass das Ereignis in die Luft sprudelt. Der Aufruf dieser Methode innerhalb des Event-Handlers verhindert jedoch nicht die Ausführung nachfolgender Event-Handler, sodass der Event-Handler für das innerste div-Element weiterhin einmal ausgelöst wird. event.stopPropagation()方法，这个方法会阻止事件继续冒泡上去。然而，在事件处理函数内部调用该方法并不会阻止之后的事件处理函数的执行，所以最内层div元素上的事件处理函数还是会被触发一次。

要解决这个问题，我们可以在按钮的事件处理函数中使用event.stopImmediatePropagation()方法，该方法除了阻止事件冒泡，还能够阻止后续事件处理函数的执行。修改代码如下：

btn.addEventListener('click', function(event) {
  console.log('Button clicked!');
  event.stopImmediatePropagation();
});

这样，当我们点击按钮时，就只会输出一次"Button clicked!"。

总结来说，事件冒泡会出现两次触发的情况，主要是由于事件处理函数的绑定方式不当或者事件阻止冒泡的机制不完善。我们需要正确地使用event.stopPropagation()和event.stopImmediatePropagation()

Um dieses Problem zu lösen, können wir die Methode event.stopImmediatePropagation() in der Ereignisverarbeitungsfunktion der Schaltfläche verwenden. Diese Methode verhindert nicht nur, dass das Ereignis sprudelt, sondern kann auch die Ausführung nachfolgender Ereignisse verhindern Verarbeitungsfunktionen. Ändern Sie den Code wie folgt: 🎜rrreee🎜Auf diese Weise wird „Schaltfläche angeklickt!“ nur einmal ausgegeben. 🎜🎜Zusammenfassend lässt sich sagen, dass das Event-Bubbling zweimal ausgelöst wird, hauptsächlich aufgrund einer fehlerhaften Bindung der Ereignisverarbeitungsfunktion oder eines unvollständigen Mechanismus zur Ereignisverhinderung. Wir müssen die Methoden event.stopPropagation() und event.stopImmediatePropagation() korrekt verwenden, um das Bubbling und die Ausführung von Ereignissen zu steuern. Nur wenn wir die Prinzipien und Mechanismen des Event-Bubblings verstehen, können wir die durch Event-Bubbling verursachten Probleme besser bewältigen und die Benutzererfahrung von Webanwendungen verbessern. 🎜

Das obige ist der detaillierte Inhalt vonWarum sprudeln Ereignisse auf und werden mehrmals ausgelöst?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html 委托 Event 事件 dom

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist der Unterschied zwischen funktionaler Programmierung und prozeduraler Programmierung?Nächster Artikel：Was ist der Unterschied zwischen funktionaler Programmierung und prozeduraler Programmierung?

In Verbindung stehende Artikel

Mehr sehen