Maison >interface Web >js tutoriel >Pourquoi les événements bouillonnent-ils et se déclenchent-ils plusieurs fois ?

Pourquoi les événements bouillonnent-ils et se déclenchent-ils plusieurs fois ?

王林original: 2024-02-19 15:46:06600parcourir

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

Le bouillonnement d'événements est un phénomène courant dans le développement Web. Cela signifie que lorsqu'un événement sur un élément est déclenché, l'événement bouillonne à partir de l'élément, déclenchant à son tour le même événement sur son élément parent. Cependant, nous constatons parfois qu’un événement se déclenche deux fois au cours du processus de bouillonnement. Afin de mieux comprendre pourquoi cela se produit, nous devons commencer par le principe du bouillonnement d’événements et l’analyser avec des exemples de code spécifiques.

Le principe du bouillonnement d'événements est basé sur l'arborescence DOM. Dans un document HTML, tous les éléments sont organisés dans une arborescence selon leurs relations imbriquées. Lorsqu'un événement est déclenché, l'événement remonte de l'élément où l'événement s'est produit, le long de son élément parent, jusqu'à ce qu'il atteigne l'élément racine. Pendant le processus de bouillonnement, l'événement déclenchera tour à tour le même gestionnaire d'événements sur chaque élément parent. L'avantage de cette conception est que le traitement de la délégation d'événements peut être facilement effectué et qu'un flux d'événements naturel peut être obtenu.

Cependant, le bouillonnement d'événements sera déclenché deux fois, principalement en raison d'une mauvaise liaison de la fonction de traitement des événements ou d'un mécanisme de prévention des événements imparfait. Regardons un exemple de code concret :

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

Dans cet exemple, nous avons un élément div avec deux niveaux imbriqués et un bouton imbriqué dans le div le plus interne. Nous lions un gestionnaire d'événements de clic à chaque élément div et bouton, et envoyons les informations correspondantes à la console.

Lorsque nous cliquons sur le bouton, nous pouvons nous attendre à ce que « Bouton cliqué ! » ne soit affiché qu'une seule fois, mais en fait, nous constaterons qu'il est affiché deux fois. En effet, pendant le processus de propagation de l'événement, l'événement déclenchera tour à tour le gestionnaire d'événements sur chaque élément parent. Autrement dit, lorsque l'utilisateur clique sur le bouton, le gestionnaire d'événements click sur le bouton sera déclenché en premier, puis l'élément div le plus interne. sera déclenché à son tour. Et la fonction de gestionnaire d'événements sur l'élément div le plus externe. Puisque nous avons appelé la méthode event.stopPropagation() dans le gestionnaire d'événements du bouton, cette méthode empêchera l'événement de bouillonner. Cependant, l'appel de cette méthode à l'intérieur du gestionnaire d'événements n'empêchera pas l'exécution des gestionnaires d'événements suivants, de sorte que le gestionnaire d'événements sur l'élément div le plus interne sera toujours déclenché une fois. event.stopPropagation()方法，这个方法会阻止事件继续冒泡上去。然而，在事件处理函数内部调用该方法并不会阻止之后的事件处理函数的执行，所以最内层div元素上的事件处理函数还是会被触发一次。

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

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

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

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

Pour résoudre ce problème, nous pouvons utiliser la méthode event.stopImmediatePropagation() dans la fonction de traitement d'événement du bouton. En plus d'empêcher l'événement de bouillonner, cette méthode peut également empêcher l'exécution d'un événement ultérieur. fonctions de traitement. Modifiez le code comme suit : 🎜rrreee🎜De cette façon, lorsque nous cliquons sur le bouton, "Bouton cliqué !" ne sera affiché qu'une seule fois. 🎜🎜En résumé, le bouillonnement d'événements sera déclenché deux fois, principalement en raison d'une mauvaise liaison de la fonction de traitement des événements ou d'un mécanisme de prévention des événements imparfait. Nous devons utiliser correctement les méthodes event.stopPropagation() et event.stopImmediatePropagation() pour contrôler le bouillonnement et l'exécution des événements. Ce n'est qu'en comprenant les principes et les mécanismes du bouillonnement d'événements que nous pourrons mieux gérer les problèmes causés par le bouillonnement d'événements et améliorer l'expérience utilisateur des applications Web. 🎜

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!

html 委托 Event 事件 dom

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quelle est la différence entre la programmation fonctionnelle et la programmation procédurale ?Article suivant：Quelle est la différence entre la programmation fonctionnelle et la programmation procédurale ?

Articles Liés

Voir plus