In JavaScript DOM -Operation werden Sie auf jeden Fall auf JS -Bubbling -Ereignisse stoßen. Das häufigste ist das Div-Popup-Ereignis, wie in der Abbildung gezeigt
Wenn Sie auf den grauen Teil klicken, verschwindet das Popup-Fenster, und wenn Sie auf den schwarzen Teil klicken, hat er keinen Einfluss.
Verwenden Sie den folgenden Code, um das sprudelnde Ereignis von JS zu analysieren
HTML -Code:
Die Codekopie lautet wie folgt:
<! DocType html>
<html lang = "en">
<kopf>
<meta charset = "utf-8">
<title> js sprudelner Ereignis </title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div>
<h1> JS Bubble Ereignisanalyse </h1>
<hr>
<div>
<tasten>
Klicken Sie auf mich!
</button>
</div>
</div>
<Script>
var box = document.querySelector (". Box"),
btn = document.querySelector (". btn");
box.onclick = function (Ereignis) {
alarm ("Ich bin div");
}
btn.onclick = function (Ereignis) {
alarm ("Ich bin Button");
}
</script>
</body>
</html>
Mit dem Standard -Entwickler -Tool des Firefox -Browsers kann die 3D -Ansicht die Reihenfolge der Div -Schicht deutlich sehen
Illustration:
Wenn Sie auf die Schaltfläche klicken, wird "Ich bin eine Schaltfläche" angezeigt und "Ich bin ein Div" wird auftauchen, da das Schaltflächenereignis zuerst ausgelöst wird und dann die nächste Schicht des Div -Klickereignisses ausgelöst wird.
Das Auslösen von Ereignissen ist das erste Prinzip.
Illustration:
Dann möchten wir manchmal nicht mehrere Ereignisse, die Konflikte auslösen, sodass das Ereignis eine StopPropagation () hat. Methode zur Verhinderung von Blasen.
Es gibt auch eine Ereignismethode, die auch häufig verwendet wird, z. B. einen Link. Wenn ich auf den Link klicke, möchte ich nicht springen, also benutze ich das Ereignis. PreventDefault (). Verfahren
Der Beispielcode ist wie folgt
Die Codekopie lautet wie folgt:
<! DocType html>
<html lang = "en">
<kopf>
<meta charset = "utf-8">
<title> js sprudelner Ereignis </title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div>
<h1> JS Bubble Ereignisanalyse </h1>
<hr>
<div>
<tasten>
Klicken Sie auf mich!
</button>
<a href = "http://www.liteng.org" id = "link"> Ich bin der Link </a>
</div>
</div>
<Script>
var box = document.querySelector (". Box"),
btn = document.querySelector (". btn");
box.onclick = function (Ereignis) {
alarm ("Ich bin div");
}
btn.onclick = function (Ereignis) {
alarm ("Ich bin Button");
Event.StopPropagation ();
}
document.getElementById ('link'). onclick = function (Ereignis) {
Alert ("Ich bin Link");
Event.PreventDefault ();
}
/*Unterscheiden zwischen Ereignis.StopPropagation (); und Event.PreventDefault ();
Ersteres verwendet StopPropagation () -Methode, um zu verhindern, dass Ereignisse sprudelten.
Letzteres besteht darin, das Standardverhalten zu blockieren, z. B. das Blockieren von Hyperlinks
*/
</script>
</body>
</html>
Können Sie den sprudelnden Vorfall von JS vollständig verstehen? Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht