Flux d'événements : bouillonnement et capture

Il s'agit du post n°7 de la série de questions d'entretien Frontend. Si vous souhaitez améliorer votre préparation ou rester à jour en général, envisagez de rejoindre Frontend Camp ?.

---

Le bouillonnement et la capture d'événements, tous deux sont des mécanismes de propagation dans le DOM (Document Object Model). Ces deux mécanismes sont opposés l'un à l'autre.

Événement bouillonnant

Dans Event bubbling, l'événement, après avoir déclenché le handler sur l'élément cible (event.target) se propage vers le haut (bulles) jusqu'à l'élément racine du document. Sur son chemin, il déclenche tous les gestionnaires d'événements sur les éléments parents.

/*
<div>



<p>In the snippet above, when you click the button you'll see the following output in console:<br>
</p>

<pre class="brush:php;toolbar:false">"Button handler"
"Container handler"

Tout d'abord, le gestionnaire du bouton est appelé et la propriété event.target est définie sur bouton lorsqu'elle a lancé l'événement. Événement en route vers l'élément racine, il appelle le gestionnaire d'événements de son parent.

Presque tous les événements font des bulles, mais il y a quelques exceptions, comme les événements ciblés, qui ne font pas de bulles.

Vous pouvez arrêter le bouillonnement en appelant la méthode stopPropagation() sur l'événement. Si le gestionnaire d'événements du bouton dans l'extrait ci-dessus arrête la propagation, le gestionnaire d'événements du conteneur ne sera pas appelé.

btn.addEventListener('click', function(event) {
  console.log('Button handler!');

  // ancestor elements won't receive the event
  event.stopPropagation();
});

Vous pouvez accéder à l'élément qui a initié l'événement en accédant à la propriété target.event. De plus, l'élément dont le gestionnaire est en cours d'exécution est accessible à l'aide de event.currentTarget.

container.addEventListener('click', function(event) {
  console.log('Container handler!'); // 'Container handler!'
  console.log(event.target); // btn
  console.log(event.currentTarget); // container
  console.log(this); // container
});

Vous voulez en savoir plus sur ce mot-clé ? J'ai écrit un article là-dessus.

Capture d'événements

Nous n’avons vu que la moitié du tableau jusqu’à présent. Lorsque vous cliquez sur le bouton de l'extrait ci-dessus, ce n'est pas le premier élément à recevoir cet événement. ?

Le flux de l'événement se compose de trois phases :

1. Phase de capture : L'événement circule de l'élément racine vers l'élément cible.
2. Phase cible : L'événement est reçu sur l'élément cible.
3. Phase de bouillonnement : l'événement commence à se propager vers l'élément racine.

Par défaut, tous les gestionnaires d'événements ne sont appelés que pendant la phase cible et la phase de bouillonnement. Pour appeler les gestionnaires d'événements lors de la phase de capture, transmettez true comme troisième argument.

el.addEventListener('click', () => {}, true);
// or to be more explicit
el.addEventListener('click', () => {}, { capture: true });

Si vous utilisez un handler en phase de capture, il ne sera pas appelé en phase de bouillonnement.

Semblable au bouillonnement, lorsque event.stopPropagation() est appelé pendant la phase de capture, il ne laissera pas l'événement se dérouler plus loin, c'est-à-dire vers le bas du DOM, dans ce cas.

Dans l'extrait dont nous avons parlé plus tôt, si le conteneur arrête la propagation pendant la phase de capture, le gestionnaire du bouton ne sera jamais appelé.

/*
<div>



<p>C'est pourquoi vous devriez toujours avoir une bonne raison d'utiliser event.stopPropagation(). Cela peut entraîner des problèmes inattendus difficiles à déboguer dans une arborescence DOM complexe ou profondément imbriquée.</p><p>La capture d'événements est rarement utilisée par rapport à Bubbling. Bubbling a de nombreux cas d'utilisation comme la "délégation d'événements" - un modèle de performance important.</p>

<p>Cet article pose les bases du prochain sujet : Délégation événementielle. Assurez-vous de bien le comprendre. Vous avez des doutes ? Laissez-les dans les commentaires. ✌️</p>


<hr>

<h2>
  
  
  Résumé
</h2>

<ol>
<li>Le flux d'événements se compose de trois phases : phase de capture, de cible et de bouillonnement.</li>
<li>Dans la phase de capture, l'événement descend de l'élément racine vers l'élément target(event.target).</li>
<li>Dans la phase de bouillonnement, l'événement circule de l'élément cible vers l'élément racine.</li>
<li>Par défaut, tous les gestionnaires d'événements sont appelés uniquement pendant la phase cible et la phase de bouillonnement.</li>
<li>En passant un troisième argument dans la fonction addEventListener, vous pouvez définir le gestionnaire sur la phase de capture.</li>
<li>À tout moment du flux d'événements, l'appel de event.stopPropagation() empêchera l'événement de se poursuivre.</li>
</ol>


<hr>

<p>Vous aimez ce que vous venez de lire ? ? Pensez à rejoindre la liste d'attente sur Frontend Camp.</p>

<p>Laissez quelques réactions "?" et des commentaires, donc cet article aide d'autres développeurs comme vous. ?</p>


          

            
  

            
        

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!