Qu'est-ce qu'un événement bouillonnant dans jquery

Les événements bouillonnants signifient qu'après qu'un événement se produit, le navigateur déclenche généralement le gestionnaire d'événements sur l'élément où l'événement s'est produit en premier, puis son élément parent, l'élément parent de l'élément parent... et ainsi de suite, jusqu'à ce que l'élément racine du document. Les événements bouillonnants sont le moyen le plus courant de propagation d'un événement ; après le traitement d'un événement, si vous souhaitez arrêter la propagation de l'événement et ne souhaitez pas qu'il continue à bouillonner, vous devez lier la méthode de traitement des événements.

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.1, ordinateur Dell G3.

Qu'est-ce que le bouillonnement d'événement ?

Un événement bouillonnant signifie que si un certain type d'événement est déclenché sur un objet, l'événement se propagera au parent et déclenchera des événements similaires définis sur l'objet parent. La direction de propagation des événements va du bas vers le haut, semblable aux bulles d’eau s’élevant du fond de l’eau.

Un document HTML peut visualiser un arbre DOM :

Le phénomène de bouillonnement d'événements peut alors être clairement exprimé comme la figure suivante :

En termes simples :

Après qu'un événement se produit, le navigateur le déclenche généralement. d'abord Le gestionnaire d'événements apparaît sur l'élément, puis sur son élément parent, sur l'élément parent de l'élément parent... et ainsi de suite, jusqu'à l'élément racine du document.

C'est ce qu'on appelle le bouillonnement d'événements et c'est le moyen le plus courant de propagation des événements. 当处理好一个事件后， 你可能想要停止事件的传播，不希望它继续冒泡。就要绑定该事件的处理方法。

Comme indiqué ci-dessus, définissez un événement de clic pour eux Lorsque le bouton est cliqué, l'événement de clic du bouton sera déclenché. Lorsque l'événement de clic du bouton est déclenché, l'événement de clic du parent correspondant. L'élément div sera déclenché, puis l'événement déclencheur du corps sera déclenché, et ainsi de suite jusqu'au document ou à la fenêtre.

Exemple de bouillonnement

Procédure :

Effet :

Lorsque vous cliquez sur la case rouge où se trouve trois, la pop-up box trois apparaît. La boîte contextuelle deux apparaît à nouveau.

Lorsque vous cliquez sur la case jaune où se trouve deux, la boîte pop-up deux apparaîtra, puis la boîte pop-up un apparaîtra.

Lorsque vous cliquez sur la case verte où l'on se trouve, seule la boîte pop-up apparaîtra.

C'est-à-dire que des bulles se sont produites dans les deux premières situations.

Si quelqu'un dit que cela est dû à l'ordre d'écriture des événements de clic, ce n'est pas le cas. Ils sont tous exécutés après le chargement du document.

Méthodes pour éviter les bulles :

Si vous souhaitez éviter les bulles ultérieures après avoir cliqué sur deux, ajoutez simplement ce qui suit

Ensuite, la boîte contextuelle deux n'apparaîtra plus en une.

jquery empêche les exemples de bouillonnement d'événements

1. Annulez le comportement par défaut et empêchez le bouillonnement d'événements en renvoyant false.

Code jQuery :

$("form").bind(
　　"submit", 
　　function() { 
　　　　return false;
　　 }
);

2. Annulez uniquement le comportement par défaut en utilisant la méthode PreventDefault().

Code jQuery :

$("form").bind(
　　"submit", 
　　function(event){
　　　　　　event.preventDefault();　　
　　}
);

3. Empêchez uniquement un événement de se propager en utilisant la méthode stopPropagation().

Code jQuery :

$("form").bind(
　　"submit", 
　　function(event){
　　　　　　event.stopPropagation();　　
　　}
);

[Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end]

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!