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

Le bouillonnement d'événements est déclenché deux fois, cela peut être dû à la méthode de liaison de la fonction de traitement des événements, à la délégation d'événements, aux méthodes de l'objet événement, à la relation d'imbrication des événements, etc. Introduction détaillée : 1. Comment lier des fonctions de traitement d'événements. Lors de la liaison de fonctions de traitement d'événements, vous pouvez utiliser la méthode "addEventListener" pour lier des événements. Si le même type de fonctions de traitement d'événements est lié plusieurs fois au même élément, puis pendant le processus. étape de bouillonnement d'événements, ces fonctions de traitement d'événements seront déclenchées dans l'ordre, provoquant le déclenchement de l'événement plusieurs fois. 2. La délégation d'événements est une technique de développement frontal, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

Dans le développement front-end, le bouillonnement d'événements est une étape du modèle d'événement DOM. Cela signifie que lors de la propagation de l'événement, l'événement remonte de l'élément cible qui a déclenché l'événement jusqu'à ce qu'il atteigne l'élément de niveau supérieur. Pendant la phase de bouillonnement des événements, les fonctions de gestion des événements sont exécutées dans l'ordre de l'intérieur vers l'extérieur.

Le mécanisme de diffusion d'événements vise à permettre aux développeurs de gérer plusieurs éléments dans le processus de propagation des événements. Lorsqu'un élément déclenche un événement, tel qu'un événement de clic (clic), l'événement sera d'abord déclenché sur l'élément déclencheur, puis remontera niveau par niveau, déclenchant tour à tour le gestionnaire d'événements sur chaque élément ancêtre.

Cependant, nous pouvons parfois rencontrer une situation où le bouillonnement d'événements est déclenché deux fois. Cela peut être dû aux raisons suivantes :

1. Méthode de liaison de la fonction de traitement d'événement :

Lors de la liaison de la fonction de traitement d'événement, nous pouvons utiliser la méthode addEventListener pour lier l'événement. Si des gestionnaires d'événements du même type sont liés au même élément plusieurs fois, alors pendant la phase de bouillonnement d'événements, ces gestionnaires d'événements seront déclenchés en séquence, provoquant le déclenchement de l'événement plusieurs fois. Par conséquent, lorsque vous liez des fonctions de gestion d’événements, vous devez vous assurer de ne les lier qu’une seule fois ou de dissocier les fonctions de gestion d’événements existantes au moment approprié.

2. Délégation d'événements :

La délégation d'événements est une technique de développement front-end couramment utilisée. Elle lie les fonctions de traitement d'événements aux éléments parents et utilise le mécanisme de diffusion d'événements pour gérer les événements sur les éléments enfants. Dans la délégation d'événements, si le même type de fonction de gestion d'événements est lié à la fois à l'élément parent et à l'élément enfant, alors pendant la phase de bouillonnement d'événements, ces fonctions de gestion d'événements seront déclenchées en séquence, provoquant le déclenchement de l'événement plusieurs fois. Par conséquent, lorsque vous utilisez la délégation d'événements, vous devez vous assurer que le gestionnaire d'événements est uniquement lié à l'élément parent pour éviter des déclenchements répétés.

3. Méthodes des objets événement :

L'objet événement est un paramètre passé dans la fonction de traitement d'événement. Il contient des informations et des méthodes liées à l'événement. Dans la fonction de gestion des événements, nous pouvons contrôler le comportement de l'événement via certaines méthodes de l'objet événement. Par exemple, vous pouvez arrêter la propagation bouillonnante d'un événement en appelant la méthode stopPropagation de l'objet événement. Si les méthodes de l'objet événement ne sont pas utilisées correctement dans le gestionnaire d'événements, l'événement peut éclater et être déclenché plusieurs fois.

4. Relation d'imbrication des événements :

Dans le développement front-end, il peut y avoir plusieurs éléments imbriqués, c'est-à-dire qu'un élément contient un autre élément. Si le même type de fonction de gestion d'événements est lié à la fois à l'élément parent et à l'élément enfant pendant la phase de bouillonnement d'événements, alors pendant la phase de bouillonnement d'événements, ces fonctions de gestion d'événements seront déclenchées en séquence, provoquant le déclenchement de l'événement plusieurs fois. . Par conséquent, lors du traitement des événements d'éléments imbriqués, vous devez faire attention à l'ordre de liaison et de déclenchement des fonctions de traitement d'événements pour éviter des déclenchements répétés.

Il convient de noter que le mécanisme de diffusion d'événements est basé sur la spécification du modèle d'événement DOM et que différents navigateurs peuvent avoir différentes méthodes d'implémentation. Par conséquent, lors de l'écriture de code frontal, vous devez essayer de suivre le modèle d'événement DOM standard et effectuer des tests de compatibilité pour garantir la cohérence et la fiabilité du code dans différents navigateurs.

Pour résumer, dans le développement front-end, le bouillonnement d'événements est une étape du modèle d'événement DOM. Cela signifie que pendant le processus de propagation de l'événement, l'événement bouillonne à partir de l'élément cible qui a déclenché l'événement, déclenchant chaque élément ancêtre dans. activer la fonction de gestionnaire d'événements. La diffusion d'événements peut être déclenchée plusieurs fois pour des raisons telles que la méthode de liaison de la fonction de traitement des événements, la délégation d'événements, les méthodes de l'objet événement ou la relation imbriquée de l'événement. Par conséquent, lors de l'écriture de code frontal, vous devez examiner attentivement tous les aspects de la gestion des événements pour garantir que la propagation des événements et le comportement de traitement sont conformes aux attentes.

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!