bouillonnement et capture d'événements - apprenez comme si vous aviez 5 ans

Allez, « Apprends comme si tu avais 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.

Le bouillonnement 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. Or, cette affirmation nécessite de clarifier la notion de propagation d'événement.

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 au niveau de 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 remonte 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.

<div id="parent" style="padding: 20px; background-color: lightblue;">
  Parent Div
  <button id="child">Click Me!</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    alert('Parent Div Clicked!');
  });

  document.getElementById('child').addEventListener('click', function(event) {
    alert('Button Clicked!');
    // event.stopPropagation(); // If you want to stop bubbling, uncomment this line
  });
</script>

Exemple d'explication : 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 vers l'élément enfant sur lequel vous avez cliqué ou avec lequel vous avez interagi.

<div id="parent" style="padding: 20px; background-color: lightgreen;">
  Parent Div
  <button id="child">Click Me!</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    alert('Parent Div Clicked!');
  }, true); // 'true' makes this event handler run during the capturing phase

  document.getElementById('child').addEventListener('click', function() {
    alert('Button Clicked!');
  });
</script>

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 par le 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 auditeur d'événement agira.

Même si les événements passent par les trois phases, les écouteurs d'événements 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 à la fois par la capture et par 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 se poursuivra 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 auditeurs 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 se déclencher pendant la phase de capture (lorsque l'événement se déplace vers le bas).

• Acara masih melalui semua fasa (menangkap, menyasarkan dan menggelegak), tetapi pendengar anda menentukan fasa mana untuk bertindak.

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!