Urutan acara
Misalkan elemen lain bersarang dalam satu elemen dan keduanya memiliki event handler OnClick. Jika pengguna mengklik pada elemen 2, klik peristiwa elemen 1 dan elemen 2 dipicu. Tapi acara mana yang dipicu terlebih dahulu? Fungsi pawang acara mana yang akan dieksekusi terlebih dahulu? Dengan kata lain, apa urutan peristiwa mana yang terjadi? Seperti yang ditunjukkan pada gambar di bawah ini, ketika area elemen span diklik, acara tiga klik akan dipicu, tetapi apa pesanannya?
<Div onClick = "func1"> <p onclick = "func2"> <span onclick = "" func3> </span> </p> </div>
Dua model
Netscape dan Microsoft memiliki dua metode yang sama sekali berbeda dalam menangani acara ini:
• Netscape menganjurkan bahwa peristiwa akan terjadi dari lapisan terluar ke elemen yang paling spesifik, dan urutan peristiwa ini disebut tipe penangkapan
• Microsoft menyimpan acara dari elemen terdalam dan kemudian menyebar ke atas. Urutan peristiwa ini disebut tipe gelembung
Urutan kedua peristiwa ini benar -benar berlawanan. Browser Explorer hanya mendukung acara gelembung, baik Mozilla, Opera7 dan Konqueror. Opera yang lebih tua dan ICAB juga mendukung
W3C
Setiap peristiwa yang terjadi dalam model acara W3C pertama kali memasuki tahap penangkapan sampai elemen target tercapai dan kemudian memasuki tahap gelembung.
Untuk pengembangan web normal, Anda dapat memilih apakah akan mengikat fungsi event handler di tahap penangkapan atau tahap gelembung. Ini dicapai melalui metode AddEventListener (). Jika parameter usecapture dari fungsi ini benar, fungsi tersebut terikat pada tahap penangkapan, dan sebaliknya, fungsi tersebut terikat pada tahap gelembung.
element.addeventlistener (acara, fungsi, usecapture)
Hentikan gelembung
Selama perkembangan normal, jika Anda ingin mencegah penyebaran peristiwa, Anda dapat melakukannya melalui satu metode.
Dalam model Microsoft, Anda harus mengatur properti CancelBubble dari acara tersebut ke True
window.event.cancelbubble = true
Dalam model W3C Anda harus memanggil metode stoppropagation () dari acara tersebut
E.Stoppropagation ()
Menyebut metode ini akan mencegah semua gelembung menyebar ke luar. Solusi silang-browser:
fungsi dosomething (e) {if (! e) {var e = window.event; e.cancelbubble = true; } if (e.stoppropagation) {e.stoppropagation (); }}Artikel di atas pemahaman mendalam tentang gelembung acara dan pengambilan acara adalah semua konten yang telah saya bagikan dengan Anda. Saya harap ini dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.