Pourquoi le mécanisme de bouillonnement d’événements se déclenche-t-il deux fois ?

Pourquoi le bouillonnement d'événements se produit-il deux fois de suite ?

Le bouillonnement d'événements est un concept important dans le développement Web. Cela signifie que lorsqu'un événement est déclenché dans un élément HTML imbriqué, l'événement bouillonne de l'élément le plus interne vers l'élément le plus externe. Ce processus peut parfois prêter à confusion. Un problème courant est que la diffusion d'événements se produit deux fois de suite.

Afin de mieux comprendre pourquoi le bouillonnement d'événements se produit deux fois de suite, regardons d'abord un exemple de code :

<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>

Le code ci-dessus crée une structure HTML imbriquée, qui contient un &lt ;div> le plus à l'extérieur. > (id="outer"), un élément <code><div> imbriqué à l'intérieur (id="inner") et un élément bouton (id=" button"). <code><div> 元素（id="outer"），一个嵌套在其中的 <code><div> 元素（id="inner"），以及一个按钮元素（id="button"）。<p>在这段代码中，我们为每个元素添加了点击事件监听器，用于输出对应元素被点击的信息。当我们在页面上点击按钮时，我们期望的输出结果是：</p><pre class='brush:php;toolbar:false;'>Button clicked Inner div clicked Outer div clicked</pre><p>然而，实际上的输出却是：</p><pre class='brush:php;toolbar:false;'>Button clicked Inner div clicked Outer div clicked Inner div clicked Outer div clicked</pre><p>可以看到，事件冒泡会连续发生两次，导致事件处理函数重复执行。</p> <p>这个问题的根本原因在于事件冒泡阶段的执行顺序。在冒泡阶段，事件会由最内层的元素开始向外层元素冒泡，然后再逐级执行父元素的事件处理函数。因此，当我们点击按钮时，点击事件会首先触发按钮的事件处理函数，然后冒泡到嵌套的 <code><div> 元素上，继续执行该元素的事件处理函数。但是，由于 <code><div> 元素还嵌套在最外层的 <code><div> 元素中，所以事件会再次冒泡到最外层的元素上，导致最外层的事件处理函数再次执行。<p>解决这个问题的方法可以有多种，下面我们来介绍两种常用的方式：</p> <ol><li>停止事件冒泡：</li></ol> <p>在事件处理函数中调用 <code>event.stopPropagation() 方法可以阻止事件的进一步传播，即停止事件冒泡。修改上述代码示例的按钮的事件处理函数如下：

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

使用 event.stopPropagation() 方法后，事件冒泡会在按钮元素上停止，不会再传播到嵌套的 <div> 元素和最外层的 <code><div> 元素上。因此，事件处理函数只会执行一次，输出的结果为：<pre class='brush:php;toolbar:false;'>Button clicked</pre><ol start="2"><li>监听捕获阶段：</li></ol> <p>除了事件冒泡阶段外，DOM 事件还有一个捕获阶段。捕获阶段是指事件从最外层的元素开始向内层元素传播的过程。利用捕获阶段，可以在最外层的元素上添加事件监听器，并在捕获阶段处理事件，然后再决定是否执行其他元素上的事件处理函数。修改上述代码示例的最外层 <code><div> 元素的事件处理函数如下：<pre class='brush:javascript;toolbar:false;'>document.getElementById('outer').addEventListener('click', function() { console.log('Outer div clicked'); }, true); // 添加 true 参数表示监听捕获阶段 </pre><p>通过在最外层元素上添加参数为 <code>true 的事件监听器，可以在捕获阶段执行事件处理函数。这样，在事件冒泡阶段，事件就不会再次触发最外层元素上的事件处理函数，从而避免了重复执行。

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

Dans ce code, nous ajoutons un écouteur d'événement de clic pour chaque élément afin de générer des informations sur le clic de l'élément correspondant. Lorsque nous cliquons sur le bouton de la page, le résultat que nous attendons est : 🎜rrreee🎜 Cependant, le résultat réel est : 🎜rrreee🎜 Comme vous pouvez le voir, le bouillonnement d'événements se produira deux fois de suite, provoquant l'exécution de la fonction de traitement d'événement. à plusieurs reprises . 🎜🎜La cause première de ce problème réside dans l’ordre d’exécution de la phase de bouillonnement des événements. Au cours de la phase de bouillonnement, l'événement remontera de l'élément le plus interne à l'élément externe, puis exécutera étape par étape la fonction de gestionnaire d'événements de l'élément parent. Par conséquent, lorsque nous cliquons sur le bouton, l'événement click déclenchera d'abord le gestionnaire d'événements du bouton, puis remontera jusqu'à l'élément <div> imbriqué et continuera à exécuter le gestionnaire d'événements de l'élément. Cependant, étant donné que l'élément <code><div> est également imbriqué dans l'élément <code><div> le plus à l'extérieur, l'événement remontera à nouveau jusqu'à l'élément le plus à l'extérieur, provoquant l'événement le plus à l'extérieur. fonction de gestion à exécuter à nouveau. 🎜🎜Il existe de nombreuses façons de résoudre ce problème. Introduisons deux méthodes couramment utilisées : 🎜<ol><li>Arrêter le bouillonnement d'événements : </li></ol>🎜Appelez la fonction de gestion des événementsevent. La méthode stopPropagation() peut empêcher la propagation ultérieure des événements, c'est-à-dire arrêter la propagation des événements. Modifiez la fonction de gestionnaire d'événement du bouton dans l'exemple de code ci-dessus comme suit : 🎜rrreee🎜Après avoir utilisé la méthode <code>event.stopPropagation(), le bouillonnement d'événement s'arrêtera sur l'élément bouton et ne se propagera plus. à l'élément

imbriqué et à l'élément <div> le plus à l'extérieur. Par conséquent, la fonction de traitement d'événement ne sera exécutée qu'une seule fois, et le résultat de sortie est : 🎜rrreee<ol start="2"><li>Phase de capture d'écoute :</li></ol>🎜En plus du bouillonnement d'événement phase, événements DOM Il existe également une phase de capture. La phase de capture fait référence au processus d'événements se propageant de l'élément le plus externe vers l'élément interne. À l'aide de la phase de capture, vous pouvez ajouter un écouteur d'événement sur l'élément le plus externe, gérer l'événement lors de la phase de capture, puis décider d'exécuter ou non des gestionnaires d'événements sur d'autres éléments. Modifiez la fonction de gestionnaire d'événements de l'élément <code><div> le plus externe dans l'exemple de code ci-dessus comme suit : 🎜rrreee🎜En ajoutant un écouteur d'événement avec le paramètre <code>true sur l'élément le plus externe element Le gestionnaire d'événements peut être exécuté pendant la phase de capture. De cette façon, pendant la phase de bouillonnement de l'événement, l'événement ne déclenchera pas à nouveau la fonction de traitement d'événement sur l'élément le plus externe, évitant ainsi une exécution répétée. 🎜🎜Pour résumer, le bouillonnement d'événements se produira deux fois de suite car l'événement bouillonnera de l'élément le plus interne à l'élément le plus externe pendant la phase de bouillonnement, et le gestionnaire d'événements sur chaque élément sera exécuté. Afin de résoudre ce problème, nous pouvons utiliser la méthode event.stopPropagation() pour empêcher l'événement de bouillonner, ou traiter l'événement en écoutant la phase de capture pour éviter une exécution répétée. 🎜