Bullage d'événements ou capture : comment les modes de propagation d'événements affectent-ils la gestion des événements DOM ?

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é, approfondissons les subtilités de ces deux concepts.

Bubbling d'événement vs capture d'événement

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 événement.

• Événement bouillonnant : 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 : « ruisseau, bulle "

Navigateur Support

• Netscape a introduit la capture d'événements, tandis que Microsoft a défendu le bouillonnement d'événements.
• La norme W3C Document Object Model Events (2000) a incorporé les deux.
• IE < ; 9 utilise exclusivement le bouillonnement d'événements, tandis qu'IE9 et d'autres navigateurs majeurs prennent en charge les deux mécanismes.

Considérations sur les performances

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

Utilisation

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 :

<div>
    <ul>
        <li></li>
    </ul>
</div>

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 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énement le 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

L'exemple interactif suivant illustre la capture et le bouillonnement phases de propagation de l'événement :

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

function log(msg) {
    logElement.innerHTML += ('<p>' + msg + '</p>');
}

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 < divs.length; i++) {
    divs[i].addEventListener('click', capture, true);
    divs[i].addEventListener('click', bubble, false);
}

Lorsque vous cliquez sur l'un des éléments en surbrillance, observez la phase de capture de l'événement se produisant en premier, suivie par la phase bouillonnante.

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!