Explication détaillée de la capture de bulles d'événements javascript et de l'exemple de code empêchant la propagation des événements

1. Qu'est-ce que le bouillonnement événementiel ?

Dans l'algorithme de tri, nous avons appris la méthode de tri des bulles. Le soi-disant bouillonnement consiste à laisser les éléments sous-jacents faire surface. Il en va de même pour le bouillonnement d'événements. Suivant Regardons un exemple pour illustrer ce qu'est le bouillonnement d'événements.

Lorsque le bouillonnement d'événements est pris en charge, lorsque nous cliquons sur le bouton "Test", la première chose qui sera exécutée est alert("bouton"), comme le le nom l'indique. :

<p>
 <button>测试</button>
</p>
<script>
 $("p").bind("click",function(){alert("p")});
 $("button").bind("click",function(){alert("button"});
</script>

Les événements sont déclenchés dans l'ordre de la cible d'événement la plus spécifique à la cible d'événement la moins spécifique (objet document).

Lorsque les éléments racine p, bouton et HTML ont tous des événements, l'ordre d'exécution des événements est :

bouton->p->html

2. Qu'est-ce que la capture d'événements ?

Regardons à nouveau la capture d'événements. Par rapport à la capture d'événements, l'ordre du temps de traitement est complètement opposé au bouillonnement d'événements. De même :

.

Lorsque ce code est exécuté, alert("p") sera exécuté en premier, et alert("button") sera exécuté en second. Nous clarifions la notion de capture d'événements :

<p>
 <button>测试</button>
</p>
<script>
 $("p").bind("click",function(){alert("p")});
 $("button").bind("click",function(){alert("button"});
</script>

Les événements sont déclenchés en partant de l'objet le moins précis (objet document), puis jusqu'au plus précis.

De même, s'il y a des événements liés sur les éléments bouton, p et html, l'ordre d'exécution des événements est :

html->p->button

3. Quels sont les mécanismes de traitement des événements des différentes versions des navigateurs ?

(1) Dans DOM, il prend en charge le bouillonnement d'événements et la capture d'événements. Dans la norme W3C, on considère que tout événement démarre à partir de la capture d'événement et trouve le nœud final. atteindra le nœud racine.

Les fonctions du DOM qui prennent en charge la liaison d'événements sont :

Pour le paramètre userCapture, la valeur par défaut est false et la diffusion d'événements est prise en charge.

addEventListener("事件名"，函数，userCapture);

Si le paramètre userCapture est vrai, la capture d'événements est prise en charge.

(2) Pour de nombreux navigateurs, la méthode addEventListener est prise en charge, mais IE ne la prend pas en charge !

(3) Le mécanisme de traitement des événements dans IE. ne prend en charge que le bouillonnement d'événements. IE a une méthode de liaison d'événement unique

méthode attachEvent :

4. Comment empêcher la propagation de l'incident ?

attachEvent("事件名"，"函数名")

La diffusion d'événements et la capture d'événements peuvent être bloquées.

(1) Premièrement, la méthode pour empêcher la propagation des événements dans le W3C est : stopPropagation(), dans IE, en définissant

(2 ) Comment empêcher le comportement par défaut d'un événement ? Dans le standard W3C, utilisez la méthode PreventDefault, dans IE en définissant

cancelBubble=true;

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!