Événement bouillonnant en javascript? Propagation des événements expliquée

Les plats clés

• L'événement bouillonnant dans JavaScript fait référence à l'ordre dans lequel les gestionnaires d'événements sont appelés lorsqu'un élément est imbriqué à l'intérieur d'un deuxième élément, et les deux éléments ont enregistré un auditeur pour le même événement. Comprendre la bouillonnement des événements, ainsi que la capture d'événements et la propagation des événements, est essentiel pour travailler avec des événements en JavaScript.
• La propagation des événements est un terme pour la bulle d'événements et la capture d'événements. Il fait référence au processus d'appel de tous les auditeurs pour le type d'événement donné, attaché aux nœuds de la branche de l'arbre Dom. La propagation est bidirectionnelle et peut être divisée en trois phases: la phase de capture, la phase cible et la phase de bulle.
• La propagation des événements peut être arrêtée dans n'importe quel écouteur en invoquant la méthode stoppropagation de l'objet de l'événement. Cela arrête la propagation, ce qui signifie que tous les auditeurs enregistrés sur les nœuds sur le chemin de propagation qui suivent la cible actuelle ne seront pas appelés.
• Certains événements sont associés à une action par défaut que le navigateur exécute à la fin de la propagation. Cette action par défaut peut être évitée avec l'annulation de l'événement, en appelant la méthode empêchée par un auditeur.

Le bubbling des événements est un terme que vous pourriez avoir rencontré dans vos voyages JavaScript. Il se rapporte à l'ordre dans lequel les gestionnaires d'événements sont appelés lorsqu'un élément est imbriqué à l'intérieur d'un deuxième élément, et les deux éléments ont enregistré un auditeur pour le même événement (un clic, par exemple).

Mais le bubbling d'événements n'est qu'une pièce du puzzle. Il est souvent mentionné en conjonction avec la capture d'événements et la propagation des événements. Et une bonne compréhension des trois concepts est essentielle pour travailler avec des événements en JavaScript - par exemple si vous souhaitez implémenter le modèle de délégation des événements.

Dans cet article, j'expliquerai chacun de ces termes et montrerai comment ils s'assemblent. Je vais également vous montrer comment une compréhension de base du flux d'événements JavaScript peut vous donner un contrôle à grain fin sur votre application. Veuillez noter que ce n'est pas une introduction aux événements, donc une familiarité avec le sujet est supposée. Si vous souhaitez en savoir plus sur les événements en général, pourquoi ne pas consulter notre livre: JavaScript: Novice to ninja.

Quelle est la propagation des événements?

Commençons par la propagation des événements. Ceci est le terme général pour le bouillonnement des événements et la capture d'événements. Considérez le balisage typique de la création d'une liste d'images liées, pour une galerie miniature par exemple:

<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>

Un clic sur une image ne génère pas seulement un événement de clic pour l'élément IMG correspondant, mais aussi pour le parent a, pour le grand-père Li et ainsi l'objet de fenêtre.

Dans la terminologie DOM, l'image est la cible de l'événement , l'élément le plus interne sur lequel le clic est originaire. La cible de l'événement, ainsi que ses ancêtres, de son parent jusqu'à l'objet de fenêtre, forment une branche dans l'arbre Dom. Par exemple, dans la galerie d'images, cette branche sera composée des nœuds: img, a, li, ul, corps, html, document, fenêtre.

Notez que la fenêtre n'est pas en fait un nœud DOM mais il implémente l'interface EventTarget, donc, pour simplifier, nous le manipulons comme si c'était le nœud parent de l'objet de document.

Cette branche est importante car c'est le chemin le long duquel les événements se propagent (ou flux). Cette propagation est le processus d'appel de tous les auditeurs pour le type d'événement donné, attaché aux nœuds de la branche. Chaque auditeur sera appelé avec un objet d'événement qui rassemble des informations pertinentes pour l'événement (plus à ce sujet plus tard).

N'oubliez pas que plusieurs auditeurs peuvent être enregistrés sur un nœud pour le même type d'événement. Lorsque la propagation atteint un tel nœud, les auditeurs sont invoqués dans l'ordre de leur enregistrement.

Il convient également de noter que la détermination de la branche est statique, c'est-à-dire qu'elle est établie lors de la répartition initiale de l'événement. Les modifications des arbres survenus pendant le traitement des événements seront ignorées.

La propagation est bidirectionnelle, de la fenêtre à la cible de l'événement et au dos. Cette propagation peut être divisée en trois phases:

1. De la fenêtre au parent cible de l'événement: il s'agit de la phase de capture
2. La cible de l'événement lui-même: il s'agit de la phase cible
3. de l'événement cible parent à la fenêtre: la phase bulle

Ce qui différencie ces phases, c'est le type d'auditeurs qui sont appelés.

La phase de capture de l'événement

Dans cette phase, seuls les auditeurs capturant sont appelés, à savoir les auditeurs qui ont été enregistrés en utilisant une valeur de vrai pour le troisième paramètre d'AdveventListener:

<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>

Si ce paramètre est omis, sa valeur par défaut est fausse et l'auditeur n'est pas un capturant.

Ainsi, au cours de cette phase, seuls les captures trouvées sur le chemin de la fenêtre au parent cible de l'événement sont appelées.

La phase cible de l'événement

Dans cette phase, tous les auditeurs enregistrés sur la cible de l'événement seront invoqués, quelle que soit la valeur de leur drapeau de capture.

La phase de bouillonnement de l'événement

Pendant la phase de bouillonnement de l'événement, seuls les non-capturers seront appelés. Autrement dit, seuls les auditeurs enregistrés avec une valeur de faux pour le troisième paramètre d'AdveventListener ():

el<span>.addEventListener('click', listener, true)
</span>

Notez que si tous les événements circulent vers la cible de l'événement avec la phase de capture, la mise au point, le flou, la charge et quelques autres, ne bouillonnent pas. C'est-à-dire que leur voyage s'arrête après la phase cible .

Par conséquent, à la fin de la propagation, chaque auditeur de la branche a été appelé exactement une fois.

L'événement ne se déroule pas pour tous les types d'événements. Pendant la propagation, il est possible pour un auditeur de savoir si un événement bouillonne en lisant la propriété booléenne .bubbles de l'objet de l'événement.

La phase d'écoulement des trois événements est illustrée dans le diagramme suivant de la spécification W3C UEVENTS.

Copyright © 2016 World Wide Web Consortium, (MIT, ERCIC, Keio, Beihang).

Accéder aux informations de propagation

J'ai déjà mentionné la propriété .bubbles de l'objet événement. Il existe un certain nombre d'autres propriétés fournies par cet objet qui sont disponibles pour les auditeurs pour accéder aux informations par rapport à la propagation.

• e.target fait référence à la cible de l'événement.
• e.currentTarget est le nœud sur lequel l'écouteur en cours d'exécution a été enregistré. Il s'agit de la même valeur du contexte d'invocation de l'auditeur, c'est-à-dire la valeur référencée par ce mot-clé.
• Nous pouvons même découvrir la phase actuelle avec E.Eventphase. C'est un entier qui fait référence à l'une des trois constantes de constructeur d'événements capturant_phase, bubbling_phase et at_target.

le mettre en pratique

Voyons les concepts ci-dessus en pratique. Dans le stylo suivant, il y a cinq boîtes carrées imbriquées, nommées B0… B4. Initialement, seule la boîte extérieure B0 est visible; Les intérieurs se montreront lorsque le pointeur de la souris planera sur eux. Lorsque nous cliquons sur une boîte, un journal du flux de propagation est affiché sur la table vers la droite.

Voir le stylo JMXDPZ par SitePoint (@SitePoint) sur Codepen.

Il est même possible de cliquer sur les boîtes: dans ce cas, la cible de l'événement sera le corps ou l'élément HTML, selon l'emplacement de l'écran de clic.

Arrêt de propagation

La propagation de l'événement peut être arrêtée dans n'importe quel écouteur en invoquant la méthode stoppropagation de l'objet de l'événement. Cela signifie que tous les auditeurs inscrits sur les nœuds sur le chemin de propagation qui suivent la cible actuelle ne seront pas appelés. Au lieu de cela, tous les autres auditeurs restants attachés sur la cible actuelle recevront toujours l'événement.

Nous pouvons vérifier ce comportement avec une simple fourche de la démo précédente, en insérant simplement un appel à stopPropagation () chez l'un des auditeurs. Ici, nous avons admis ce nouvel auditeur en tant que capturant dans la liste des rappels enregistrés sur la fenêtre:

<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>

De cette façon, quelle que soit la boîte cliquée, la propagation s'arrête tôt, n'atteignant que les auditeurs de capturant sur la fenêtre.

Arrêter la propagation immédiate

Comme indiqué par son nom, StopImmMediatEpropagation jette les freins immédiatement, empêchant même les frères et sœurs de l'auditeur actuel de recevoir l'événement. Nous pouvons le voir avec un changement minimal dans le dernier stylo:

<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>

Maintenant, rien n'est sorti dans la table de journal, ni les lignes des captures de fenêtre C1 et C2, car la propagation s'arrête après l'exécution du nouvel écouteur.

L'annulation de l'événement

Certains événements sont associés à une action par défaut que le navigateur exécute à la fin de la propagation. Par exemple, le cliquez sur un élément de lien ou le bouton Cliquez sur un formulaire Soumettre amène le navigateur à naviguer vers une nouvelle page ou à soumettre respectivement le formulaire.

Il est possible d'éviter l'exécution de ces actions par défaut avec l'annulation de l'événement, en appelant une autre méthode de l'objet de l'événement, e.PreventDefault, dans un auditeur.

Conclusion

avec cela, j'espère vous avoir montré comment les événements bouillonnants et la capture d'événements fonctionnent en javascript. Si vous avez des questions ou des commentaires, je serais heureux de les entendre dans la discussion ci-dessous.

références

• Document Object Model (DOM) Niveau 2 Événements Spécification
• W3C DOM4 - Événements
• DOM - Norme de vie - Événements
• Événements d'interface utilisateur W3C - architecture d'événements DOM
• MSN - Événements et Dom

Cet article a été révisé par des pairs par Yaphi Berhanu et Dominic Myers. Merci à tous les pairs examinateurs de SitePoint pour avoir fait du contenu SitePoint le meilleur possible!

Les questions fréquemment posées (FAQ) sur l'événement bouillonnant en javascript

Quelle est la principale différence entre le bouillonnement des événements et la capture d'événements?

Les bouillons d'événements et la capture d'événements sont deux façons de propagation de l'événement dans l'API HTML DOM lorsqu'un événement se produit dans un élément à l'intérieur d'un autre élément, et les deux Les éléments ont enregistré une poignée pour cet événement. La principale différence réside dans le sens de la propagation de l'événement par rapport à l'arbre Dom. Dans l'événement Bubbling, l'événement se déclenche d'abord sur l'élément cible le plus profond, puis bouillonne à ses parents. D'un autre côté, la capture d'événements implique que l'événement se dirige vers l'élément cible, à partir de ses parents.

Comment puis-je arrêter l'événement bouillonnant en javascript?

En JavaScript, vous pouvez arrêter l'événement bouillonner en utilisant la méthode stoppropagation (). Cette méthode empêche la propagation supplémentaire de l'événement actuel dans les phases de capture et de bouillonnement. Voici un exemple:
element.addeventListener ('cliquez', fonction (événement) {
event.Stoppropagation ();
});
Dans ce code, si l'élément est cliqué, l'événement Ne bouillonne pas à ses éléments parents.

Quelle est l'utilisation pratique de la bouillonnement des événements en javascript?

Les bouillons d'événements peuvent être très utiles pour gérer certains événements en JavaScript. Par exemple, si vous avez un élément parent avec plusieurs éléments enfants et que vous souhaitez écouter un certain événement sur tous ces éléments, vous pouvez définir l'écouteur d'événements sur le parent et profiter de la bulle des événements. De cette façon, chaque fois que l'événement est déclenché sur les éléments enfants, il bouillonnera au parent et que vous pouvez y gérer.

Puis-je utiliser des événements bouillonnants et capturer en même temps?

Oui, vous pouvez utiliser à la fois des événements bouillonnants et capturant en même temps. Ceci est connu sous le nom de délégation d'événements. C'est une technique où vous déléguez la gestion de l'événement à un élément parent au lieu de définir l'écouteur d'événements sur les éléments enfants individuels. Cela peut être particulièrement utile lorsque vous avez un grand nombre d'éléments enfants.

Quel est le comportement par défaut de la propagation des événements en javascript?

Le comportement par défaut de la propagation des événements en javascript est bouillonnant. Cela signifie que par défaut, les événements commenceront de l'élément cible et bullent jusqu'à la racine du document. Cependant, vous pouvez modifier ce comportement en utilisant la méthode addEventListener () avec le paramètre UseCapture défini sur true, ce qui permettra la capture d'événements.

Comment le bouillonnement des événements fonctionne-t-il avec des éléments imbriqués?

Quand Un événement est licencié à partir d'un élément imbriqué, l'événement se propage à travers les ancêtres de l'élément imbriqué dans l'arbre Dom. C'est un événement bouillonnant. Chaque ancêtre a à son tour une chance de répondre à l'événement. Cette propagation se poursuit jusqu'à ce qu'elle atteigne la racine du document ou jusqu'à ce que la stoppropagation () soit appelée.

Puis-je empêcher l'action par défaut d'un événement en bouillonnement d'événements?

Oui, vous pouvez empêcher le Action par défaut d'un événement dans l'événement bouillonnant en utilisant la méthode empêchéedaLault (). Cette méthode annule l'événement si elle est annulée, ce qui signifie que l'action par défaut qui appartient à l'événement ne se produira pas.

Quelle est l'ordre de propagation de l'événement en javascrip Dans JavaScript, capture la phase, la phase cible et la phase bouillonnante. Pendant la phase de capture, l'événement descend à l'élément. La phase cible est l'endroit où l'événement a atteint l'élément cible. La phase bouillonnante est lorsque l'événement bouillonne de l'élément.

Comment puis-je vérifier si un événement bouillonne ou non?

Vous pouvez vérifier si un événement bouillonne ou non en utilisant le Propriété de bulles de l'objet de l'événement. Cette propriété renvoie une valeur booléenne indiquant si l'événement bouillonne ou non. ) Des méthodes sont utilisées pour arrêter la propagation de l'événement. La différence est que StopPropagation () empêche l'événement de bouillonner la chaîne d'événements, tandis que StopImmMediatEpropagation () empêche les autres auditeurs du même événement d'être appelés.

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!