1. Aliran acara
Aliran acara menjelaskan urutan di mana acara diterima dari halaman. Tapi IE mengusulkan aliran gelembung, sementara Netscape Communicator mengusulkan aliran penangkapan.
Stream Acara JavaScript
2. Gelembung acara
Acara mulai diterima oleh elemen yang paling spesifik (simpul dengan hierarki bersarang terdalam), dan kemudian menyebarkan ke atas langkah demi langkah ke node yang kurang spesifik (dokumen). sebagai berikut:
Salinan kode adalah sebagai berikut:
<Html>
<head>
<title> Acara Bubbling </iteme>
</head>
<body>
<Div id = "myDiv"> klik saya </div>
</body>
</html>
window.onload = function () {
var obj = document.geteLementById ("test");
obj.onClick = function () {
waspada (this.tagname);
};
document.body.onClick = function () {
waspada (this.tagname);
};
document.documentelement.onClick = function () {
waspada (this.tagname);
};
document.onClick = function () {
peringatan ("dokumen");
};
window.onClick = function () {
peringatan ("jendela");
}
};
Urutan Propagasi Acara: Div-> Body-> HTML-> Dokumen
Melihat:
Semua browser modern mendukung acara gelembung, tetapi ada beberapa perbedaan dalam implementasi. Gelembung acara di IE5.5 dan versi sebelumnya akan melompat langsung dari tubuh ke dokumen (tidak ada HTML yang dieksekusi). Peristiwa gelembung Firefox, Chrome, dan Safari sampai ke objek jendela.
3. Hentikan gelembung acara dan batalkan acara default
A. Dapatkan Objek Acara
Salinan kode adalah sebagai berikut:
fungsi getEvent (event) {
// window.event yaitu
// acara non -e
Kembalikan Acara || window.event;
}
B Fungsi: Hentikan Gelembung Acara
Salinan kode adalah sebagai berikut:
function stopBubble (e) {
// Jika objek acara disediakan, ini adalah browser non -e
if (e && e.stoppropagation) {
// Oleh karena itu mendukung metode stoppropagation () dari W3C
e.Stoppropagation ();
} kalau tidak {
// Kalau tidak, kita perlu menggunakan IE untuk membatalkan gelembung acara
window.event.cancelbubble = true;
}
}
C. Memblokir perilaku default browser
Salinan kode adalah sebagai berikut:
fungsi stopdefault (e) {
// BLOKA Tindakan Browser Default (W3C)
if (e && e.preventdefault) {
e.preventdefault ();
} kalau tidak {
// Cara memblokir tindakan default fungsi di IE
window.event.ReturnValue = false;
}
mengembalikan false;
}