Qu'est-ce que la capture d'événements bouillonnants

Le bouillonnement d'événements et la capture d'événements font référence à deux manières différentes de propagation d'événements lors de la gestion des événements dans le DOM HTML. Introduction détaillée : 1. Le bouillonnement d'événements signifie que lorsqu'un élément déclenche un événement, l'événement se propage de l'élément le plus interne à l'élément le plus externe. C'est-à-dire que l'événement est d'abord déclenché sur l'élément déclencheur, puis monte progressivement jusqu'à atteindre l'élément racine. 2. La capture d'événement est le processus inverse. L'événement démarre à partir de l'élément racine et est capturé étape par étape. étape jusqu'à ce qu'il atteigne les éléments déclencheurs.

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

Le bouillonnement d'événements et la capture d'événements font référence à deux manières différentes de propagation d'événements lors de la gestion des événements dans le DOM HTML.

Le bouillonnement d'événement signifie que lorsqu'un élément déclenche un événement, l'événement se propage de l'élément le plus interne à l'élément le plus externe. Autrement dit, l'événement se déclenche d'abord sur l'élément déclencheur, puis se propage jusqu'à ce qu'il atteigne l'élément racine.

La capture d'événements est le processus inverse. Les événements partent de l'élément racine et sont capturés étape par étape vers le bas jusqu'à ce qu'ils atteignent l'élément qui déclenche l'événement.

Dans le DOM HTML, par défaut, les événements sont propagés par bouillonnement d'événements. Autrement dit, l'événement se déclenche d'abord sur l'élément déclencheur, puis se propage jusqu'à ce qu'il atteigne l'élément racine.

Vous pouvez spécifier clairement la méthode de propagation des événements via la méthode addEventListener. La méthode addEventListener peut accepter trois paramètres, à savoir le type d'événement à surveiller, la fonction de traitement des événements et une valeur booléenne utilisée pour spécifier la méthode de propagation des événements. Lorsque la valeur booléenne transmise est vraie, cela signifie que la capture d'événements est utilisée ; lorsque la valeur booléenne transmise est fausse ou omise, cela signifie que la diffusion d'événements est utilisée.

Par exemple, le code suivant montre la différence entre la capture d'événement et le bouillonnement d'événement :

<div id="outer">
  <div id="inner">
    <button id="button">点击</button>
  </div>
</div>
<script>
var outer = document.getElementById(&#39;outer&#39;);
var inner = document.getElementById(&#39;inner&#39;);
var button = document.getElementById(&#39;button&#39;);
outer.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件冒泡 - 外层元素&#39;);
}, false);
inner.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件冒泡 - 内层元素&#39;);
}, false);
button.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件冒泡 - 按钮&#39;);
}, false);
outer.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件捕获 - 外层元素&#39;);
}, true);
inner.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件捕获 - 内层元素&#39;);
}, true);
button.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件捕获 - 按钮&#39;);
}, true);
</script>

Après avoir exécuté le code ci-dessus, lorsque l'on clique sur le bouton, la phase de capture d'événement et la phase de bouillonnement d'événement sera déclenché en séquence Fonction de gestion des événements et affichera les informations correspondantes sur la console.

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!