Maison >interface Web >js tutoriel >Pourquoi le même événement déclenche-t-il deux fois le bouillonnement ?

Pourquoi le même événement déclenche-t-il deux fois le bouillonnement ?

WBOYoriginal: 2024-02-19 22:34:07809parcourir

Pourquoi le même événement bouillonnant se produit-il deux fois ?

Le bouillonnement d'événements est un mécanisme de diffusion d'événements courant dans les navigateurs. Lorsqu'un élément déclenche un événement, l'événement sera transmis de l'élément déclenché aux éléments supérieurs dans l'ordre jusqu'à ce qu'il soit transmis à l'élément racine du document. Ce processus est comme des bulles bouillonnant dans l’eau, c’est pourquoi on l’appelle bouillonnement événementiel.

Cependant, nous constatons parfois que le même événement bouillonnant se produit deux fois. Pourquoi ? Il y a deux raisons principales : l'inscription à l'événement et le traitement de l'événement.

Tout d'abord, nous devons préciser que l'enregistrement d'un événement fait référence à la liaison d'un événement à un élément. Dans le développement Web courant, nous utilisons généralement la méthode addEventListener() pour ajouter des écouteurs d'événements aux éléments. Lorsque nous utilisons cette méthode pour ajouter des écouteurs d'événements aux éléments, une duplication se produit parfois. Par exemple :

var element = document.getElementById('myElement');
element.addEventListener('click', function() {
    console.log('事件冒泡');
});

Dans le code ci-dessus, nous avons ajouté un écouteur d'événement de clic à un élément nommé "myElement". Cependant, si nous appelons la méthode addEventListener() plusieurs fois dans le code et ajoutons le même type d'écouteur d'événement au même élément, alors chaque appel ajoutera un nouvel écouteur, provoquant la répétition du même événement Bubble.

Deuxièmement, la gestion des événements fait référence au code qui est exécuté après le déclenchement de l'événement. Lors de la transmission d'un événement, lorsqu'un événement est transmis d'un élément enfant à un élément parent, le gestionnaire d'événements correspondant sur l'élément parent est déclenché. Cependant, il arrive parfois que nous déclenchions accidentellement le même type d'événement pour un élément enfant dans le gestionnaire d'événements de l'élément parent, ce qui provoque la répétition du même événement deux fois.

L'exemple de code suivant illustrera les deux situations ci-dessus :

<!DOCTYPE html>
<html>
<head>
    <title>事件冒泡</title>
</head>
<body>
    <div id="parentElement">
        <div id="childElement">点击我</div>
    </div>

    <script>
        var parentElement = document.getElementById('parentElement');
        var childElement = document.getElementById('childElement');

        parentElement.addEventListener('click', function() {
            console.log('父元素的事件处理程序');
            childElement.click(); // 在父元素的事件处理程序中再次触发子元素的click事件
        });

        childElement.addEventListener('click', function() {
            console.log('子元素的事件处理程序');
        });
    </script>
</body>
</html>

Dans le code ci-dessus, nous avons ajouté des écouteurs d'événement de clic à l'élément parent et à l'élément enfant respectivement. Lorsque l'événement de clic de l'élément parent est déclenché, " Le parent. "le gestionnaire d'événements de l'élément enfant" et déclenche l'événement click de l'élément enfant, provoquant le déclenchement de l'événement click de l'élément enfant et l'affichage du "gestionnaire d'événements de l'élément enfant". De cette façon, le même événement revient deux fois.

Afin d'éviter que des bulles d'événements ne se produisent deux fois, nous pouvons ajouter une condition de jugement dans le gestionnaire d'événements de l'élément parent, et déclencher l'événement correspondant de l'élément enfant uniquement si la condition est remplie, évitant ainsi des bulles répétées.

En résumé, la raison pour laquelle le même événement apparaît deux fois est principalement due aux opérations répétées d'inscription et de traitement des événements. Nous pouvons éviter les bouillonnements répétés en optimisant l’inscription aux événements et en ajoutant des jugements conditionnels.

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!

事件

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：Quels sont les moyens courants pour éviter les événements bouillonnants ?Article suivant：Quels sont les moyens courants pour éviter les événements bouillonnants ?

Articles Liés

Voir plus