Warum wird das Event-Bubbling zweimal ausgelöst?

Warum wird das Event Sprudeln zweimal ausgelöst?

Ereignisblasen bedeutet, dass im DOM, wenn ein Element ein Ereignis auslöst (z. B. ein Klickereignis), das Ereignis vom Element zum übergeordneten Element aufsteigt, bis es nach oben zum Dokumentobjekt gelangt. Das Ereignis-Bubbling ist Teil des DOM-Ereignismodells, das es Entwicklern ermöglicht, Ereignis-Listener an übergeordnete Elemente zu binden, sodass, wenn untergeordnete Elemente Ereignisse auslösen, diese Ereignisse erfasst und über den Bubbling-Mechanismus verarbeitet werden können.

Allerdings stoßen Entwickler manchmal auf Situationen, in denen Ereignisse in die Luft sprudeln und zweimal ausgelöst werden, was normalerweise bei verschachtelten Elementen der Fall ist. Um besser zu verstehen, warum es zweimal ausgelöst wird, schauen wir uns ein bestimmtes Codebeispiel an.

HTML-Code lautet wie folgt:

<div id="parent">
  <div id="child">
    <button id="button">点击我</button>
  </div>
</div>

JavaScript-Code lautet wie folgt:

var parent = document.getElementById("parent");
var child = document.getElementById("child");
var button = document.getElementById("button");

parent.addEventListener("click", function(event) {
  console.log("父元素被点击");
});

child.addEventListener("click", function(event) {
  console.log("子元素被点击");
});

button.addEventListener("click", function(event) {
  console.log("按钮被点击");
  event.stopPropagation();
});

Im obigen Code haben wir ein übergeordnetes Element, ein untergeordnetes Element und eine Schaltfläche, die jeweils an Klickereignis-Listener gebunden sind. Wenn wir auf einer Webseite auf eine Schaltfläche klicken, wird das Ereignis gemäß den Bubbling-Regeln vom untergeordneten Element an das übergeordnete Element übergeben.

Jetzt simulieren wir einen Tastenklick. Wenn wir auf die Schaltfläche klicken, gibt die Konsole die folgende Ausgabe aus:

按钮被点击
子元素被点击

Warum wird es zweimal ausgelöst?

Das liegt daran, dass die Ereignissprudelung beim auslösenden Element beginnt und der Reihe nach zum übergeordneten Element aufsteigt und in diesem Prozess zwei Schichten aus untergeordneten Elementen und übergeordneten Elementen durchläuft. Wenn wir auf die Schaltfläche klicken, wird zunächst das Klickereignis der Schaltfläche ausgelöst und „Auf die Schaltfläche wurde geklickt“ wird gedruckt. Dann sprudelt das Ereignis weiter zum untergeordneten Element, löst das Klickereignis des untergeordneten Elements aus und gibt die Meldung „Untergeordnetes Element wurde angeklickt“ aus. Schließlich setzt sich das Sprudeln bis zum übergeordneten Element fort und löst das Klickereignis des übergeordneten Elements aus.

Wie kann man also verhindern, dass das Ereignis zweimal sprudelt und ausgelöst wird?

Wir können verhindern, dass das Ereignis sprudelt, indem wir event.stopPropagation() im Click-Event-Handler der Schaltfläche aufrufen. Im obigen Code haben wir diese Methode im Click-Ereignis der Schaltfläche verwendet. Wenn wir erneut auf die Schaltfläche klicken, gibt die Konsole nur „auf die Schaltfläche geklickt“ aus, ohne weiterhin zu untergeordneten und übergeordneten Elementen zu gelangen. event.stopPropagation()来阻止事件继续冒泡。在上述代码中，我们已经在按钮的点击事件中使用了这个方法。当我们再次点击按钮时，控制台将只打印出"按钮被点击"，而不会继续冒泡至子元素和父元素。

总结来说，事件冒泡会触发两次的情况通常出现在嵌套元素中，当一个元素触发了某个事件时，事件会从触发元素开始向上冒泡至父元素，直到冒泡到最顶层的文档对象为止。然而，我们可以通过调用event.stopPropagation()

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