Saat berbicara tentang acara JavaScript, sulit untuk menghindari tiga topik: gelembung acara, penangkapan acara, dan memblokir acara default, apakah itu wawancara atau dalam pekerjaan sehari -hari.
1. Gelembung acara
Mari kita lihat sepotong kode:
var $ input = document.geteLementsByTagname ("input") [0]; var $ div = document.geteLementsbyTagname ("div") [0]; var $ body = document.geteLementsbyTagname ("body") [0]; $ input.onClick = function (e) {this.style.border = "5px window.e; alert ("merah")} $ div.onClick = function (e) {this.style.border = "5px solid green" waspada ("hijau")} $ body.onClick = fungsi (e) {this.style.border = "5px solid yellow" waspada ("kuning")}Kode HTML
<SEV> <input type = "Tombol" value = "Test Event Bubbles" /> </div> "Red", "Green", "Yellow" muncul pada gilirannya.
Niat asli Anda adalah untuk memicu elemen tombol, tetapi dipicu bersama dengan peristiwa yang terikat pada elemen induk. Ini adalah gelembung acara.
Jika peristiwa yang mengikat input diubah menjadi:
$ input.onClick = function (e) {this.style.border = "5px solid red" var e = e || window.e; alert ("merah") e.stoppropagation ();}Pada saat ini, hanya "merah" yang akan muncul karena mencegah acara dari menggelegak.
2. Tangkapan acara
Karena ada gelembung peristiwa, mungkin ada penangkapan peristiwa, yang merupakan proses terbalik. Perbedaannya adalah dari elemen atas ke elemen target atau dari elemen target ke elemen atas.
Mari kita lihat sepotong kode:
$ input.addeventListener ("klik", function () {this.style.border = "5px solid red"; alert ("red")}, true) $ div.addeventListener ("click", function () {this.style.border = "5px solid green"; ware ("green (" green) {true) {true) {true) $ " this.style.border = "5px solid yellow";Pada saat ini, "kuning", "hijau", "merah" muncul satu per satu, yang merupakan penangkapan acara.
3. Blokir acara default
Ada beberapa perilaku default elemen HTML, seperti tag A, dan akan ada tindakan lompat setelah mengklik; Input Jenis Kirim dalam formulir Formulir memiliki acara lompatan pengiriman default; Input tipe reset memiliki perilaku formulir reset. Jika Anda ingin memblokir perilaku default browser ini, JavaScript memberi Anda metode.
var $ a = document.geteLementsbyTagname ("a") [0]; $ a.onClick = function (e) {waspada ("Tindakan lompatan diblokir oleh saya") e.preventDefault (); // return false; // Itu juga mungkin} <a href = "http://keleyi.com"> Ke leyi </a> Acara default hilang.Sejak mengembalikan False dan E.PreventDefault () memiliki efek yang sama, apakah ada perbedaan? Tentu saja ada.
Perilaku default host acara hanya dapat diselenggarakan dalam atribut acara HTML dan metode penanganan acara tingkat DOM0.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.