Qu’est-ce qu’un événement bouillonnant ?
Autrement dit, lorsque plusieurs div sont imbriqués ; c'est-à-dire qu'une relation parent-enfant est établie lorsque le div parent et le div enfant rejoignent l'événement onclick, lorsque l'événement onclick du div enfant est déclenché, le div enfant exécute le correspondant. js opération. Mais l'événement onclick du div parent sera également déclenché. Cela entraîne plusieurs niveaux de simultanéité des événements, conduisant au chaos des pages. C’est un événement bouillonnant.
Comment éliminer les événements bouillonnants
Empêcher les événements JavaScript de bouillonner (cancelBubble, stopPropagation)
Le morceau de code suivant peut très bien expliquer ce qu'est l'effet bouillonnant et quelle est l'élimination de l'effet bouillonnant ?
Copiez le code comme suit :
<html>
<tête>
<title> Empêcher les événements JavaScript de bouillonner (cancelBubble, stopPropagation)</title>
<meta name="keywords" content="JavaScript, bouillonnement d'événement, CancelBubble, stopPropagation" />
<script type="text/javascript">
fonction faireQuelque chose (obj,evt) {
alerte(obj.id);
var e=(evt)?evt:window.event; //Détermine le type de navigateur et utilise CancelBubble dans les navigateurs basés sur le noyau IE
si (fenêtre.événement) {
e.cancelBubble=true ;
} autre {
//e.preventDefault(); //Prend en charge la méthode stopPropagation dans les navigateurs basés sur le noyau Firefox
e.stopPropagation();
}
}
</script>
</tête>
<corps>
<div id="parent1" onclick="alert(this.id)">
<p>Il s'agit du div parent1.</p>
<div id="child1" onclick="alert(this.id)">
<p>C'est l'enfant1.</p>
</div>
<p>Il s'agit du div parent1.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)">
<p>Voici le div parent2.</p>
<div id="child2" onclick="doSomething(this,event);">
<p>C'est l'enfant2. Will bubble.</p>
</div>
<p>Voici le div parent2.</p>
</div>
</corps>
</html>
Après avoir copié le code directement, lorsque vous cliquez sur child1, non seulement la boîte de dialogue child1 apparaîtra, mais également la boîte de dialogue parent1 apparaîtra.
C'est l'événement bouillonnant
Mais cliquer sur chili2 ne fera apparaître que child2 mais pas parent2. C'est l'effet de l'application d'effets spéciaux qui empêchent les événements bouillonnants.