Pourquoi le bouillonnement d'événements se déclenche-t-il deux fois ?

Pourquoi l'événement bouillonnant se déclenche-t-il deux fois ?

Le bouillonnement d'événement signifie que dans le DOM, lorsqu'un élément déclenche un événement (comme un événement de clic), l'événement bouillonne de l'élément vers l'élément parent jusqu'à ce qu'il bouillonne vers le haut jusqu'à l'objet document. La diffusion d'événements fait partie du modèle d'événement DOM, qui permet aux développeurs de lier des écouteurs d'événements aux éléments parents, de sorte que lorsque des éléments enfants déclenchent des événements, ceux-ci puissent être capturés et traités via le mécanisme de diffusion.

Cependant, les développeurs rencontrent parfois des situations dans lesquelles des événements bouillonnent et se déclenchent deux fois, ce qui se produit généralement dans des éléments imbriqués. Pour mieux comprendre pourquoi il se déclenche deux fois, regardons un exemple de code spécifique.

Le code HTML est le suivant :

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

Le code JavaScript est le suivant :

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();
});

Dans le code ci-dessus, nous avons un élément parent, un élément enfant et un bouton, respectivement liés aux écouteurs d'événement click. Lorsque nous cliquons sur un bouton d'une page Web, l'événement sera transmis de l'élément enfant à l'élément parent selon les règles de bouillonnement.

Maintenant, simulons un clic sur un bouton. Lorsque nous cliquons sur le bouton, la console imprimera le résultat suivant :

按钮被点击
子元素被点击

Pourquoi est-il déclenché deux fois ?

En effet, le bouillonnement d'événements commence à partir de l'élément déclencheur et remonte jusqu'à l'élément parent en séquence, et dans ce processus, il passe à travers deux couches d'éléments enfants et d'éléments parents. Lorsque nous cliquons sur le bouton, l'événement de clic du bouton est d'abord déclenché et "le bouton est cliqué" est imprimé. Ensuite, l'événement continue de remonter jusqu'à l'élément enfant, déclenchant l'événement click de l'élément enfant et affichant "l'élément enfant a été cliqué". Enfin, le bouillonnement continue jusqu'à l'élément parent, déclenchant l'événement de clic de l'élément parent.

Alors comment éviter que l’événement bouillonne et se déclenche deux fois ?

Nous pouvons empêcher l'événement de bouillonner en appelant event.stopPropagation() dans le gestionnaire d'événements de clic du bouton. Dans le code ci-dessus, nous avons utilisé cette méthode dans l'événement click du bouton. Lorsque nous cliquons à nouveau sur le bouton, la console n'imprimera que "bouton cliqué" sans continuer à faire remonter les éléments enfants et parents. event.stopPropagation()来阻止事件继续冒泡。在上述代码中，我们已经在按钮的点击事件中使用了这个方法。当我们再次点击按钮时，控制台将只打印出"按钮被点击"，而不会继续冒泡至子元素和父元素。

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

En résumé, le bouillonnement d'événements est généralement déclenché deux fois dans les éléments imbriqués. Lorsqu'un élément déclenche un événement, l'événement remonte de l'élément déclencheur vers l'élément parent jusqu'à ce qu'il bouillonne vers l'objet document de niveau supérieur. Cependant, nous pouvons empêcher l'événement de se déclencher en appelant event.stopPropagation(), empêchant ainsi que l'événement soit déclenché deux fois. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!