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.

<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

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 :

.

<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

(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 :

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

(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 :

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

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

(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!