Dans l'opération JavaScript DOM, vous rencontrerez certainement des événements Bubbling JS. Le plus courant est l'événement pop-up div comme indiqué sur la figure
Lorsque vous cliquez sur la partie grise, la fenêtre contextuelle disparaît et cliquer sur la partie noire n'a aucun effet.
Utilisez le code suivant pour analyser l'événement bouillonnant de JS
Code html:
La copie de code est la suivante:
<! Doctype html>
<html lang = "en">
<adal>
<meta charset = "utf-8">
<Title> JS Bubbling Event </Title>
<link rel = "Stylesheet" href = "style.css">
</ head>
<body>
<div>
<h1> Analyse des événements de bulles JS </H1>
<hr>
<div>
<button>
Cliquez sur moi!
</ bouton>
</div>
</div>
<cript>
var box = document.QuerySelector (". Box"),
btn = document.QuerySelector (". btn");
box.OnClick = fonction (événement) {
alerte ("je suis div");
}
btn.onclick = fonction (événement) {
alert ("je suis bouton");
}
</cript>
</docy>
</html>
En utilisant l'outil de développement par défaut du navigateur Firefox, la vue 3D peut clairement voir l'ordre de la couche div
Illustration:
Lorsque vous cliquez sur le bouton, "Je suis un bouton" apparaîtra et "Je suis un div" apparaîtra, car l'événement du bouton sera déclenché en premier, puis la couche suivante de l'événement de clic div sera déclenchée.
Le déclenchement des événements est le premier principe de sortie.
Illustration:
Ensuite, parfois nous ne voulons pas que plusieurs événements déclenchent des conflits, donc l'événement a une stoppropagation (); Méthode pour empêcher les bulles.
Il existe également une méthode d'événement qui est également couramment utilisée, comme un lien. Lorsque je clique sur le lien, je ne veux pas sauter, donc j'utilise l'événement.PreventDefault (); méthode
L'exemple de code est le suivant
La copie de code est la suivante:
<! Doctype html>
<html lang = "en">
<adal>
<meta charset = "utf-8">
<Title> JS Bubbling Event </Title>
<link rel = "Stylesheet" href = "style.css">
</ head>
<body>
<div>
<h1> Analyse des événements de bulles JS </H1>
<hr>
<div>
<button>
Cliquez sur moi!
</ bouton>
<a href = "http://www.liteng.org" id = "link"> Je suis le lien </a>
</div>
</div>
<cript>
var box = document.QuerySelector (". Box"),
btn = document.QuerySelector (". btn");
box.OnClick = fonction (événement) {
alerte ("je suis div");
}
btn.onclick = fonction (événement) {
alert ("je suis bouton");
event.stoppropagation ();
}
document.getElementById ('link'). onClick = fonction (événement) {
alert ("je suis lien");
event.PreventDefault ();
}
/ * Distinguer entre event.stoppropagation (); et event.preventDefault ();
Le premier utilise la méthode stoppropagation () pour empêcher les événements de bouillonner.
Ce dernier est de bloquer le comportement par défaut tel que le blocage des hyperliens
* /
</cript>
</docy>
</html>
Pouvez-vous bien comprendre l'incident bouillonnant de JS? Si vous avez des questions, veuillez me laisser un message