Warum wird der Event-Bubbling-Mechanismus zweimal ausgelöst?

Warum kommt es zweimal hintereinander zu Event-Bubbling?

Event-Bubbling ist ein wichtiges Konzept in der Webentwicklung. Es bedeutet, dass, wenn ein Ereignis in einem verschachtelten HTML-Element ausgelöst wird, das Ereignis vom innersten Element zum äußersten Element übergeht. Dieser Vorgang kann manchmal zu Verwirrung führen. Ein häufiges Problem besteht darin, dass die Ereignisblase zweimal hintereinander auftritt.

Um besser zu verstehen, warum Event-Bubbling zweimal hintereinander auftritt, schauen wir uns zunächst ein Codebeispiel an:

<div id="outer">
  <div id="inner">
    <button id="button">Click me</button>
  </div>
</div>

<script>
document.getElementById('button').addEventListener('click', function() {
  console.log('Button clicked');
});

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

document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer div clicked');
});
</script>

Der obige Code erstellt eine verschachtelte HTML-Struktur, die einen äußersten &lt ;div></code enthält >-Element (id="outer"), ein darin verschachteltes <code><div>-Element (id="inner") und ein Schaltflächenelement (id="button"). <div> 元素（id="outer"），一个嵌套在其中的 <div> 元素（id="inner"），以及一个按钮元素（id="button"）。

在这段代码中，我们为每个元素添加了点击事件监听器，用于输出对应元素被点击的信息。当我们在页面上点击按钮时，我们期望的输出结果是：

Button clicked
Inner div clicked
Outer div clicked

然而，实际上的输出却是：

Button clicked
Inner div clicked
Outer div clicked
Inner div clicked
Outer div clicked

可以看到，事件冒泡会连续发生两次，导致事件处理函数重复执行。

这个问题的根本原因在于事件冒泡阶段的执行顺序。在冒泡阶段，事件会由最内层的元素开始向外层元素冒泡，然后再逐级执行父元素的事件处理函数。因此，当我们点击按钮时，点击事件会首先触发按钮的事件处理函数，然后冒泡到嵌套的 <div> 元素上，继续执行该元素的事件处理函数。但是，由于 <div> 元素还嵌套在最外层的 <div> 元素中，所以事件会再次冒泡到最外层的元素上，导致最外层的事件处理函数再次执行。

解决这个问题的方法可以有多种，下面我们来介绍两种常用的方式：

1. 停止事件冒泡：

在事件处理函数中调用 event.stopPropagation() 方法可以阻止事件的进一步传播，即停止事件冒泡。修改上述代码示例的按钮的事件处理函数如下：

document.getElementById('button').addEventListener('click', function(event) {
  console.log('Button clicked');
  event.stopPropagation(); // 阻止事件冒泡
});

使用 event.stopPropagation() 方法后，事件冒泡会在按钮元素上停止，不会再传播到嵌套的 <div> 元素和最外层的 <div> 元素上。因此，事件处理函数只会执行一次，输出的结果为：

Button clicked

2. 监听捕获阶段：

除了事件冒泡阶段外，DOM 事件还有一个捕获阶段。捕获阶段是指事件从最外层的元素开始向内层元素传播的过程。利用捕获阶段，可以在最外层的元素上添加事件监听器，并在捕获阶段处理事件，然后再决定是否执行其他元素上的事件处理函数。修改上述代码示例的最外层 <div> 元素的事件处理函数如下：

document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer div clicked');
}, true); // 添加 true 参数表示监听捕获阶段

通过在最外层元素上添加参数为 true 的事件监听器，可以在捕获阶段执行事件处理函数。这样，在事件冒泡阶段，事件就不会再次触发最外层元素上的事件处理函数，从而避免了重复执行。

总结起来，事件冒泡会连续发生两次是因为事件在冒泡阶段会从最内层元素一直冒泡到最外层元素，并且会执行每个元素上的事件处理函数。为了解决这个问题，我们可以使用 event.stopPropagation()

In diesem Code fügen wir für jedes Element einen Klickereignis-Listener hinzu, um Informationen über den Klick des entsprechenden Elements auszugeben. Wenn wir auf der Seite auf die Schaltfläche klicken, erwarten wir folgende Ausgabe: 🎜rrreee🎜 Die tatsächliche Ausgabe lautet jedoch: 🎜rrreee🎜 Wie Sie sehen können, kommt es zweimal hintereinander zu einem Ereignis-Bubbling, wodurch die Ereignisverarbeitungsfunktion ausgeführt wird wiederholt. 🎜🎜Die Hauptursache dieses Problems liegt in der Ausführungsreihenfolge der Event-Bubbling-Phase. In der Blasenphase sprudelt das Ereignis vom innersten Element zum äußeren Element und führt dann Schritt für Schritt die Ereignishandlerfunktion des übergeordneten Elements aus. Wenn wir also auf die Schaltfläche klicken, löst das Klickereignis zunächst den Ereignishandler der Schaltfläche aus, sprudelt dann zum verschachtelten <div>-Element hoch und fährt mit der Ausführung des Ereignishandlers des Elements fort. Da das <div>-Element jedoch auch innerhalb des äußersten <div>-Elements verschachtelt ist, wird das Ereignis wieder zum äußersten Element hochsteigen und das äußerste Ereignis verursachen Hantierungsfunktion erneut ausgeführt werden. 🎜🎜Es gibt viele Möglichkeiten, dieses Problem zu lösen. Lassen Sie uns zwei häufig verwendete Methoden vorstellen: 🎜

1. Stoppen Sie das Sprudeln von Ereignissen:

🎜Rufen Sie die Ereignisbehandlungsfunktion auf.Ereignis. Die Methode stopPropagation() kann die weitere Ausbreitung von Ereignissen verhindern, d. h. die Ereignisblase stoppen. Ändern Sie die Event-Handler-Funktion der Schaltfläche im obigen Codebeispiel wie folgt: 🎜rrreee🎜Nach Verwendung der Methode event.stopPropagation() stoppt das Ereignissprudeln auf dem Schaltflächenelement und wird nicht mehr weitergegeben auf das verschachtelte <div>-Element und das äußerste <div>-Element. Daher wird die Ereignisverarbeitungsfunktion nur einmal ausgeführt und das Ausgabeergebnis lautet: 🎜rrreee

2. Listening-Capture-Phase:

🎜Zusätzlich zum Ereignissprudeln Phase, DOM-Ereignisse Es gibt auch eine Erfassungsphase. Die Erfassungsphase bezieht sich auf den Prozess der Ausbreitung von Ereignissen vom äußersten Element zum inneren Element. Mithilfe der Erfassungsphase können Sie einen Ereignis-Listener für das äußerste Element hinzufügen, das Ereignis in der Erfassungsphase verarbeiten und dann entscheiden, ob Ereignishandler für andere Elemente ausgeführt werden sollen. Ändern Sie die Ereignishandlerfunktion des äußersten <div>-Elements im obigen Codebeispiel wie folgt: 🎜rrreee🎜Indem Sie einen Ereignis-Listener mit dem Parameter true für das äußerste Element hinzufügen Der Event-Handler kann während der Capture-Phase ausgeführt werden. Auf diese Weise löst das Ereignis während der Ereignis-Bubbling-Phase die Ereignisverarbeitungsfunktion für das äußerste Element nicht erneut aus, wodurch eine wiederholte Ausführung vermieden wird. 🎜🎜Zusammenfassend lässt sich sagen, dass das Ereignis-Bubbling zweimal hintereinander auftritt, da das Ereignis während der Bubbling-Phase vom innersten Element zum äußersten Element sprudelt und der Ereignishandler für jedes Element ausgeführt wird. Um dieses Problem zu lösen, können wir die Methode event.stopPropagation() verwenden, um zu verhindern, dass das Ereignis sprudelt, oder das Ereignis durch Abhören der Erfassungsphase verarbeiten, um eine wiederholte Ausführung zu vermeiden. 🎜