Allez, « Apprenez comme si vous aviez 5 ans » n'est qu'une phrase — je ne raconte pas une histoire de jouets ici ! Mais je vous promets que si vous lisez attentivement du début à la fin, tout aura un sens.

La diffusion et la capture d'événements sont deux phases de la façon dont les événements se propagent (ou voyagent) à travers le DOM (Document Object Model) lorsqu'un événement est déclenché en JavaScript. Désormais, cette affirmation nécessite d'éclaircir la notion de propagation d'événements.

Propagation d'événements

Lorsqu'un événement se produit sur un élément, comme un bouton à l'intérieur d'un div, l'événement ne se produit pas uniquement sur ce bouton. L'événement traverse le DOM selon un processus appelé propagation d'événement. Ce processus se déroule en deux phases principales :

• Capture d'événement (également appelé « trickling »)

• Événement bouillonnant

Maintenant, j'espère que vous avez compris l'idée. Comprenons les deux avec des exemples.

Événement bouillonnant

Le bouillonnement d'événement signifie que lorsqu'un événement se produit sur un élément, il déclenche d'abord le gestionnaire d'événements pour cet élément. Ensuite, il se déplace vers le haut dans l'arborescence DOM pour déclencher les gestionnaires d'événements de ses éléments parents, et ainsi de suite, jusqu'à ce qu'il atteigne le document ou la racine de l'arborescence DOM.

  Parent Div
  Click Me!

Explication de l'exemple : Lorsque vous cliquez sur le bouton, le message « Bouton cliqué ! » l'alerte s'affiche en premier car l'événement est déclenché sur le bouton. Après cela, l'événement « bouillonne » jusqu'au div parent et vous voyez le message « Parent Div Clicked ! alerte. En effet, l'événement démarre au niveau du bouton et remonte ensuite vers son div parent. Ainsi, ce processus de propagation est appelé « Event Bubbling ».

Capture d'événements

La capture d'événements est l'inverse du bouillonnement. L'événement commence en haut de la page Web (en commençant par le document) et descend vers l'élément avec lequel vous avez interagi. Cela signifie que les gestionnaires d'événements pour les éléments parents seront déclenchés en premier et que l'événement descendra jusqu'à l'élément enfant sur lequel vous avez cliqué ou avec lequel vous avez interagi.

  Parent Div
  Click Me!

Dans ce cas, lorsque vous cliquez sur le bouton, le message « Parent Div Clicked ! » l'alerte s'affichera en premier. Ensuite, le message « Bouton cliqué ! » l'alerte s'affichera car l'événement commence au niveau du document, capture (s'écoule) d'abord jusqu'au div parent, puis atteint le bouton.

La valeur true du troisième argument de addEventListener est le déterminant de la phase de capture.

Chaque événement passe par 3 phases

Naturellement, chaque événement passe par les trois phases :

• Phase de capture : l'événement commence en haut (document) et descend jusqu'à la cible.

• Phase cible : L'événement atteint l'élément avec lequel vous avez interagi (la cible).

• Phase de bouillonnement : après avoir atteint la cible, l'événement remonte à travers les éléments parents.

Alors oui, un événement passe naturellement par les trois phases, mais JavaScript vous donne le contrôle sur la phase dans laquelle votre écouteur d'événement agira.

Même si les événements passent par les trois phases, les écouteurs d'événements de JavaScript sont par défaut attachés à la phase de bouillonnement. Cela signifie que lorsque vous ajoutez un écouteur d'événement sans rien spécifier, il écoutera l'événement uniquement pendant la phase de bouillonnement (une fois que l'événement a atteint la cible et commence à monter).

Lorsque vous transmettez vrai comme troisième argument, vous dites à JavaScript d'écouter l'événement pendant la phase de capture (lorsqu'il parcourt le DOM). L'événement passe toujours par toutes les phases (capture, cible et bouillonnement), mais l'écouteur sera déclenché pendant la phase de capture, avant que l'événement n'atteigne l'élément cible.

L'événement passe-t-il de la capture au bouillonnement lorsque vous utilisez true ? Non, l'événement toujours passe par la capture et le bouillonnement. Lorsque vous passez vrai, vous n’empêchez pas la phase de bouillonnement. Vous dites simplement à l'auditeur de répondre pendant la capture. L'événement continuera de la capture à la cible, puis bouillonnera comme d'habitude.

Résumé:

• Tous les événements passent naturellement par des phases de capture, de ciblage et de bouillonnement.

• Par défaut, les écouteurs d'événements fonctionnent pendant la phase de bouillonnement (une fois que l'événement a atteint la cible et s'est déplacé vers le haut).

• Lorsque vous passez vrai, vous dites à l'écouteur d'événement de déclencher pendant la phase de capture (lorsque l'événement se déplace vers le bas).

• L'événement passe toujours par toutes les phases (capture, ciblage et bouillonnement), mais votre auditeur décide dans quelle phase agir.