Artikel ini menjelaskan model penangkapan acara dan model gelembung di JS. Bagikan untuk referensi Anda.
Metode implementasi spesifik adalah sebagai berikut:
Contoh 1:
Salin kode sebagai berikut: <Html>
<head>
<type skrip = "Teks/JavaScript">
window.onload = function () {
document.getElementById ('par'). AddEventListener ('klik', function () {waspada ('par');}, true);
document.getElementById ('son'). addeventListener ('click', function () {waspada ('son');}, true);
}
</script>
<type style = "text/css">
#par {width: 300px; tinggi: 200px; latar belakang: abu -abu;}
#son {lebar: 200px; tinggi: 100px; latar belakang: green;}
</tyle>
</head>
<body>
<Div id = "par">
<Div id = "son"> </div>
</div>
</body>
</html>
Contoh 2:
Salin kode sebagai berikut: <Html>
<head>
<type skrip = "Teks/JavaScript">
window.onload = function () {
document.getElementById ('par'). addeventListener ('click', function () {waspada ('par');});
document.geteLementById ('son'). addeventListener ('click', function () {alert ('son');});
}
</script>
<type style = "text/css">
#par {width: 300px; tinggi: 200px; latar belakang: abu -abu;}
#son {lebar: 200px; tinggi: 100px; latar belakang: green;}
</tyle>
</head>
<body>
<Div id = "par">
<Div id = "son"> </div>
</div>
</body>
</html>
AddEventListener: Parameter ketiga adalah parameter opsional, yang salah secara default, menunjukkan model gelembung, yaitu, lapisan terkecil dipicu terlebih dahulu (div dengan ID adalah putra); Dan jika parameter sejati ditambahkan, itu berarti bahwa itu adalah model penangkapan (dari html-> body ---> div), memicu sesuai dengan level tersebut.
Kode HTML Contoh 1 memiliki dua div. Div kecil terkandung dalam div besar. Saat mengklik div kecil, acara Peringatan ('par') pertama -tama akan dipicu; Dan kemudian bagian peringatan ('Son') akan dipicu. Contoh 2 justru sebaliknya.
Jika atribut "Object.onclick" digunakan untuk memicu peristiwa tersebut, model gelembung digunakan.
IE tidak mendukung AddEventListener, tetapi menggunakan AttachEvent. Tetapi AttachEvent tidak mendukung parameter ketiga, itu tidak menangkap model.
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.