Bubbling et capture d'événements : comprendre la propagation dans le DOM

Le bouillonnement et la capture d'événements jouent un rôle crucial dans la propagation des événements au sein de l'API HTML DOM. Pour comprendre leur fonctionnalité, examinons les subtilités de ces deux concepts.

Bubbling d'événements vs capture d'événements

Lorsqu'un événement se produit dans un élément imbriqué dans un autre élément , et que les deux éléments ont des gestionnaires d'événements enregistrés pour cet événement particulier, le mode de propagation de l'événement détermine l'ordre dans lequel les éléments reçoivent le event.

• Event Bubbling : L'événement est initialement capturé et géré par l'élément le plus interne, puis propagé vers l'extérieur vers ses éléments parents.
• Événement Capture :  L'événement est d'abord capturé par l'élément le plus externe et propagé vers l'intérieur jusqu'à son élément imbriqué. éléments.

Trickling vs. Bubbling

La capture est également connue sous le nom de « trickling », un terme qui permet de se souvenir de l'ordre de propagation : « ruissellement, bulle up."

Support des navigateurs

• Netscape a introduit la capture d'événements, tandis que Microsoft s'est fait le champion des événements. bouillonnement.
• La norme W3C Document Object Model Events (2000) intègre les deux.
• IE

Considérations relatives aux performances

Le bouillonnement d'événements peut avoir des performances légèrement inférieures dans les DOM complexes par rapport aux événements. capture.

Usage

Nous utilisons la méthode addEventListener(type, listening, useCapture) pour enregistrer les gestionnaires d'événements en mode bouillonnement (par défaut) ou en mode capture. Pour utiliser le modèle de capture, le troisième argument doit être défini sur true.

Exemple

Considérez la structure HTML suivante :

Si un événement click se produit dans l'élément li :

• En mode capture, l'événement est d'abord géré par le div, suivi par le ul, et enfin par le li.
• En mode bouillonnant, l'événement est d'abord géré par le li, puis par le ul, et enfin par le div.

Ressources supplémentaires

• [Commande d'événements sur QuirksMode](https://www.quirksmode.org/js/events_order.html )
• [addEventListener sur MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
• [Événements avancés sur QuirksMode](https://www.quirksmode.org/ js/events/)

Démonstration interactive

La démonstration interactive suivante L'exemple illustre les phases de capture et de bouillonnement de la propagation des événements :

var logElement = document.getElementById('log');

function log(msg) {
    logElement.innerHTML  = ('
'   msg   '
');
}

function capture() {
    log('capture: '   this.firstChild.nodeValue.trim());
}

function bubble() {
    log('bubble: '   this.firstChild.nodeValue.trim());
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i 
Lorsque vous cliquez sur l'un des éléments en surbrillance, observez la phase de capture d'événement se produisant en premier, suivie de la phase de bouillonnement.