Comprendre le mécanisme de propagation des événements : capture et analyse de l'ordre des bulles

L'événement doit-il être capturé en premier ou diffusé en premier ? Percer le mystère de l'ordre de déclenchement des événements

Le traitement des événements est une partie très importante du développement Web, et l'ordre de déclenchement des événements est l'un des mystères. En HTML, les événements sont généralement propagés par « capture » ​​ou « bullage ». Qu'est-ce qui doit être capturé en premier ou bouillonné en premier ? C'est une question très déroutante.

Avant de répondre à cette question, comprenons d’abord les mécanismes de « capture » et de « bulle » des événements. La capture d'événements fait référence à la transmission d'événements couche par couche depuis l'élément supérieur jusqu'au nœud cible, tandis que la diffusion d'événements fait référence à la transmission d'événements couche par couche depuis le nœud cible jusqu'à l'élément supérieur. Les deux méthodes de propagation jouent un rôle important dans le traitement des événements.

Dans les premiers navigateurs, l'ordre de propagation des événements a été lancé par Netscape. Ils croient que l’ordre de propagation des événements devrait aller de l’élément le plus externe à l’élément interne, puis de l’élément interne à l’élément externe. Par conséquent, le navigateur Netscape définit la séquence de propagation des événements comme étant la capture d'événements et le bouillonnement d'événements.

Cependant, avec la popularité d'Internet, Microsoft a lancé son propre navigateur IE et a adopté une séquence de propagation d'événements différente de celle de Netscape. Ils croient que la propagation des événements devrait commencer de l’élément le plus intérieur vers l’élément extérieur, puis se propager de l’élément extérieur à l’élément intérieur.

Afin de résoudre ce problème d'incompatibilité mutuelle, le W3C a développé une norme unifiée. Selon les normes du W3C, l'ordre de propagation des événements doit être d'abord la capture, puis le bouillonnement. C'est l'ordre de propagation actuellement suivi par tous les navigateurs modernes.

Plus précisément, lorsqu'un événement se produit sur un élément, le navigateur effectuera d'abord la phase de capture d'événement. Lors de la phase de capture d'événements, le navigateur propage les événements de l'élément le plus externe vers l'élément cible. Lorsque l'événement se propage vers l'élément cible, il entre dans la phase cible. Dans la phase cible, le navigateur exécute le gestionnaire d'événements lié à l'élément cible. Enfin, l'événement entre dans la phase de bouillonnement et le navigateur propagera l'événement de l'élément cible aux éléments externes jusqu'à ce qu'il atteigne l'élément le plus externe.

Pour mieux comprendre la séquence de propagation des événements, nous pouvons la démontrer avec un exemple simple. Supposons que nous ayons un document HTML contenant trois éléments imbriqués :

<div id="outer">
  <div id="inner">
    <button id="button">Click me</button>
  </div>
</div>

Nous lions une fonction de gestionnaire d'événements à chaque élément, qui est exécutée respectivement dans la phase de capture d'événement et la phase de bouillonnement. Nous pouvons y parvenir grâce au code suivant :

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var button = document.getElementById('button');

outer.addEventListener('click', function() {
  console.log('Outer capture');
}, true);

inner.addEventListener('click', function() {
  console.log('Inner capture');
}, true);

button.addEventListener('click', function() {
  console.log('Button capture');
}, true);

outer.addEventListener('click', function() {
  console.log('Outer bubble');
}, false);

inner.addEventListener('click', function() {
  console.log('Inner bubble');
}, false);

button.addEventListener('click', function() {
  console.log('Button bubble');
}, false);

Lorsque nous cliquons sur le bouton, le résultat de la sortie de la console sera :

Outer capture
Inner capture
Button capture
Button bubble
Inner bubble
Outer bubble

À partir des résultats, nous pouvons clairement voir l'ordre de propagation des événements. Tout d'abord, le navigateur exécutera les fonctions de traitement des événements de la phase de capture (Capture externe, Capture interne et Capture de bouton) dans l'ordre de l'extérieur vers l'intérieur. Ensuite, le navigateur exécutera les fonctions de traitement des événements de la phase de bouillonnement (Bulle bouton, Bulle intérieure et Bulle extérieure) dans l'ordre de l'intérieur vers l'extérieur.

A travers cet exemple, nous pouvons conclure que dans les navigateurs modernes, l'ordre de propagation des événements est de capturer d'abord puis de faire des bulles. Ceci est exigé par les normes établies par le W3C.

Dans le processus de développement actuel, nous utilisons généralement le mécanisme de bouillonnement d'événements pour gérer les événements. Parce que le mécanisme de diffusion d'événements peut facilement mettre en œuvre la délégation d'événements, réduire le nombre de fonctions de traitement d'événements et améliorer les performances. Le mécanisme de capture d’événements est relativement rarement utilisé et n’est utilisé que dans certaines circonstances particulières.

En résumé, l'ordre de propagation des événements est de capturer d'abord puis de faire bulle. En comprenant le mécanisme de propagation des événements, nous pouvons mieux gérer les événements et améliorer l'expérience utilisateur des pages Web.

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!