Pourquoi le bouillonnement d’événements se déclenche-t-il plusieurs fois ?

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

Dans le développement front-end, on rencontre souvent la notion de bouillonnement événementiel. La diffusion d'événements signifie que lorsqu'un événement spécifique d'un élément est déclenché sur la page, l'événement sera transmis couche par couche à l'élément supérieur jusqu'à ce qu'il soit finalement transmis à l'objet document.

Cependant, nous pouvons parfois rencontrer le problème de bouillonnement et de déclenchement d'événements deux fois, même si nous ne lions l'écouteur d'événement qu'une seule fois. Alors pourquoi le phénomène de déclenchements répétés se produit-il ? Examinons ci-dessous les raisons possibles.

Tout d’abord, nous devons clarifier le concept de fonctionnement du bouillonnement d’événements dans le navigateur. Lorsque le navigateur déclenche un événement spécifique sur un élément, il parcourt l'arborescence DOM à partir de l'élément et vérifie si chaque élément parent a un gestionnaire d'événement lié à l'événement. Si un gestionnaire d'événements est trouvé, le navigateur exécute le gestionnaire et continue le parcours jusqu'à l'objet document. Ce processus est un bouillonnement d’événements.

Cependant, il est important de noter que le bouillonnement d'événements ne sera pas seulement transmis aux éléments parents, mais également aux éléments ancêtres. Autrement dit, la diffusion d'événements déclenche à plusieurs reprises des gestionnaires d'événements sur les éléments parents et ancêtres. Cela peut entraîner le déclenchement de l'événement deux fois.

La question est donc : pourquoi le bouillonnement d'événements passe-t-il aux éléments ancêtres ? En effet, lors de la liaison des écouteurs d'événements, nous utilisons généralement la délégation d'événements. C'est-à-dire, liez l'écouteur d'événement à l'élément parent, puis laissez l'élément parent gérer l'événement au lieu de son élément enfant via le bouillonnement d'événements.

Si l'écouteur d'événement que nous lions existe à la fois sur l'élément parent et sur l'élément ancêtre, le bouillonnement d'événement sera déclenché deux fois. En effet, lorsque le navigateur parcourt l'arborescence DOM, il vérifie si chaque élément parent et élément ancêtre est lié au même gestionnaire d'événements. S'ils sont présents, le navigateur les exécutera.

Afin de mieux comprendre ce problème, un exemple de code spécifique est fourni ci-dessous :

Code HTML :

<div id="parent">
  <div id="child">Click me!</div>
</div>

Code JavaScript :

var parent = document.getElementById('parent');
var child = document.getElementById('child');

parent.addEventListener('click', function() {
  console.log('Parent Clicked!');
});

child.addEventListener('click', function() {
  console.log('Child Clicked!');
});

Dans le code ci-dessus, nous avons cliqué sur à la fois l'élément parent et l'élément enfant L'écouteur d'événement pour l'événement. Lorsque nous cliquons sur l'élément enfant, la console affichera les résultats deux fois : « Enfant cliqué ! » et « Parent cliqué ! ». En effet, le bouillonnement d'événements est déclenché deux fois, d'abord l'écouteur d'événements de l'élément enfant est exécuté, puis l'écouteur d'événements de l'élément parent est exécuté.

Afin d'éviter le problème du déclenchement double d'un événement, nous pouvons utiliser la méthode stopPropagation() pour empêcher l'événement de continuer à bouillonner. Par exemple, dans le code ci-dessus, nous pouvons ajouter une ligne de code dans l'écouteur d'événement de l'élément enfant :

child.addEventListener('click', function(event) {
  console.log('Child Clicked!');
  event.stopPropagation();
});

Après avoir utilisé la méthode stopPropagation(), seul l'écouteur d'événement de l'élément enfant sera exécuté, et l'événement l'écouteur de l'élément parent ne sera pas exécuté à nouveau. De cette façon, nous pouvons éviter le problème de la propagation et du double déclenchement des événements.

Pour résumer, la raison pour laquelle le bouillonnement d'événements est déclenché deux fois est parce que le bouillonnement d'événements est transmis aux gestionnaires d'événements sur les éléments parents et ancêtres. Pour résoudre ce problème, nous pouvons utiliser la méthode stopPropagation() pour empêcher l’événement de se propager vers le haut.

J'espère que grâce à l'introduction de cet article, les lecteurs pourront avoir une compréhension plus complète du principe de bouillonnement d'événements et pourquoi il est déclenché deux fois, et pourront trouver des solutions efficaces lorsqu'ils rencontrent ce problème dans le développement réel.

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!