Dalam operasi JavaScript DOM, Anda pasti akan menghadapi acara gelembung JS. Yang paling umum adalah acara pop-up div seperti yang ditunjukkan pada gambar
Saat mengklik bagian abu-abu, jendela pop-up menghilang, dan mengklik bagian hitam tidak berpengaruh.
Gunakan kode berikut untuk menganalisis peristiwa menggelegak JS
Kode HTML:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title> JS Bubbling Event </title>
<tautan rel = "stylesheet" href = "style.css">
</head>
<body>
<div>
<h1> analisis acara gelembung JS </h1>
<Hr>
<div>
<buton>
Klik saya!
</tombol>
</div>
</div>
<script>
var box = document.queryselector (". box"),
btn = document.queryselector (". btn");
box.onClick = function (event) {
peringatan ("Saya div");
}
btn.onClick = function (event) {
peringatan ("Saya tombol");
}
</script>
</body>
</html>
Menggunakan alat pengembang default dari browser Firefox, tampilan 3D dapat dengan jelas melihat urutan lapisan div
Ilustrasi:
Saat mengklik tombol, "Saya sebuah tombol" akan muncul dan "I Am a Div" akan muncul, karena acara tombol akan dipicu terlebih dahulu dan kemudian lapisan acara klik Div berikutnya akan dipicu.
Pemicu peristiwa adalah prinsip pertama yang pertama.
Ilustrasi:
Maka kadang -kadang kami tidak ingin beberapa peristiwa memicu konflik, jadi peristiwa memiliki stoppropagation (); metode untuk mencegah gelembung.
Ada juga metode acara yang juga biasa digunakan, seperti tautan. Ketika saya mengklik tautan, saya tidak ingin melompat, jadi saya menggunakan event.preventdefault (); metode
Kode contoh adalah sebagai berikut
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title> JS Bubbling Event </title>
<tautan rel = "stylesheet" href = "style.css">
</head>
<body>
<div>
<h1> analisis acara gelembung JS </h1>
<Hr>
<div>
<buton>
Klik saya!
</tombol>
<a href = "http://www.liteng.org" id = "link"> saya tautan </a>
</div>
</div>
<script>
var box = document.queryselector (". box"),
btn = document.queryselector (". btn");
box.onClick = function (event) {
peringatan ("Saya div");
}
btn.onClick = function (event) {
peringatan ("Saya tombol");
event.stoppropagation ();
}
document.geteLementById ('link'). onClick = function (event) {
alert ("I Am Link");
event.preventdefault ();
}
/*Membedakan antara event.stoppropagation (); dan event.preventdefault ();
Yang pertama menggunakan metode stoppropagation () untuk mencegah peristiwa menggelegak.
Yang terakhir adalah untuk memblokir perilaku default seperti memblokir hyperlink
*/
</script>
</body>
</html>
Bisakah Anda memahami sepenuhnya insiden gelembung JS? Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan