Artikel ini menjelaskan penggunaan menambahkan dan menghapus mendengarkan di JavaScript. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Mendengarkan acara di JS adalah menggunakan AddEventListener untuk mengikat acara. Penggunaan ini sangat umum dan sederhana di jQuery, tetapi lebih rumit di JS asli. Di sini kami mengatur tes dan contoh berbagai metode acara AddEventListener untuk referensi dan pembelajaran Anda.
Ketika saya bekerja sebagai pemain dua hari yang lalu, saya menemukan beberapa masalah menghapus monitor dan tidak dapat dihapus. Setelah melihatnya, saya menemukan bahwa parameter harus sepenuhnya sesuai. Apa artinya sepenuhnya sesuai? Dengan kata lain:
Salinan kode adalah sebagai berikut: $ ('. Video') [0] .addeventListener ('timeUpdate', currentTimeHandler, true);
Misalnya, tiga parameter perlu diteruskan dalam kalimat ini sehingga dapat dihapus. Mengapa itu perlu? Ya, bagian yang menyakitkan ada di sini:
Saat menambahkan dan menghapus, parameter ketiga dapat diabaikan, tetapi situasi default mereka berbeda saat ini! Lai
Biasanya AddEventListener salah ...
1. Tambahkan acara kustom mendengarkan
Salinan kode adalah sebagai berikut: var eventhandlescounter = 1; // Hitung jumlah acara yang ditambahkan, 0 digunakan sebagai bit yang dipesan
fungsi addevent (obj, evt, fn) {
if (! fn .__ eventId) {fn .__ eventId = eventhandlescounter ++;}
if (! Obj .__ Eventhandles) {obj .__ eventhandles = []; }
if (! Obj .__ Eventhandles [evt]) {
OBJ .__ Eventhandles [evt] = [];
if (obj ["on"+evt] instance dari fungsi) {
OBJ .__ Eventhandles [evt] [0] = obj ["on"+evt];
obj ["on"+evt] = handleevents;
}
}
obj .__ Eventhandles [evt] [fn .__ eventId] = fn;
function handleevents () {
var fns = obj .__ eventhandles [evt];
untuk (var i = 0; i <fns.length; i ++)
fns [i] .call (ini);
}
}
2. Kustomisasi acara Hapus Mendengarkan
Salinan kode adalah sebagai berikut: fungsi delevent (obj, evt, fn) {
if (! Obj .__ Eventhandles ||! Obj .__ Eventhandles [evt] ||! fn .__ eventId) {
mengembalikan false;
}
if (obj .__ eventhandles [evt] [fn .__ eventId] == fn) {
hapus obj .__ Eventhandles [evt] [fn .__ eventId];
}
}
3. Perbaiki metode di atas
Salinan kode adalah sebagai berikut: Function AddEvent (OBJ, EVT, FN, USECAPTURE) {
if (obj.addeventListener) {// Lebih disukai menggunakan pendaftaran acara W3C
obj.addeventlistener (evt, fn, !! usecapture);
}kalau tidak{
if (! fn .__ eventId) {fn .__ eventId = addevent .__ eventhandlescounter ++;}
if (! Obj .__ Eventhandles) {obj .__ eventhandles = [];}
if (! Obj .__ Eventhandles [evt]) {
OBJ .__ Eventhandles [evt] = [];
if (obj ["on"+evt]) {
(obj .__ Eventhandles [evType] [0] = obj ["on"+evType]) .__ eventId = 0;
}
obj ["on"+evType] = addevent.execeventhandles;
}
}
}
addevent .__ eventhandlescounter = 1;
addevent.execeventhandles = function (evt) {
if (! This .__ Eventhandles) {return true;}
EVT = EVT || window.event;
var fns = ini .__ Eventhandles [evt.type];
untuk (var i = 0; i <fns.length; i ++) {
if (fns [i] instanceof function) {
fns [i] .call (ini);
}
}
};
fungsi delevent (obj, evt, fn, usecapture) {
if (obj.removeeventListener) {// hapus event handler terlebih dahulu menggunakan metode w3c
obj.removeeventlistener (evt, fn, !! usecapture);
}kalau tidak {
if (obj .__ eventhandles) {
var fns = obj .__ eventhandles [evt];
if (fns) {hapus fns [fn .__ eventId];}
}
}
4. Standarisasi Objek Acara
Salinan kode adalah sebagai berikut: Function FixEvent (EVT) {
if (! evt.target) {
evt.target = evt.srcelement;
evt.preventDefault = fixevent.preventdefault;
evt.stoppropagation = fixevent.stoppropagation;
if (evt.type == "mouseover") {
evt.relatedTarget = evt.fromeLement;
} lain jika (evt.type == "mouseout") {
evt.relatedTarget = evt.toElement;
}
evt.charcode = (evt.type == "keypress")? evt.keycode: 0;
evt.eventphase = 2;
evt.timestamp = (tanggal baru ()). getTime ();
}
return evt;
}
fixevent.preventdefault = function () {this.returnValue = false;}
fixevent.stoppropagation = function () {this.cancelbubble = true;};
Fungsi FixEvent tidak dieksekusi secara terpisah, harus memiliki parameter objek acara, dan dieksekusi hanya ketika peristiwa terjadi! Cara terbaik adalah mengintegrasikannya ke dalam execeventhandles dari fungsi addEvent.
Salin kode sebagai berikut: AddEvent.ExeceVentHandles = function (evt) {// Transize semua fungsi penanganan acara dan jalankan
if (! This .__ Eventhandles) {return true;}
evt = fixEvent (evt || window.event); // Standarisasi di sini
var fns = ini .__ Eventhandles [evt.type];
untuk (var i = 0; i <fns.length; i ++) {
if (fns [i] instanceof function) {
fns [i] .call (this, evt); // dan gunakan sebagai parameter pertama dari fungsi penangan acara
// Dengan cara ini, Anda dapat menggunakan metode terpadu untuk mengakses objek peristiwa dalam fungsi event handler}}};
Di atas ditulis oleh seorang master, dan berikut ini adalah beberapa contoh acara pemantauan aktual
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd html 4.01 transisi // en">
<Html>
<head>
<title> test6.html </title>
<type skrip = "Teks/JavaScript">
function test () {
window.alert ("Anda memilih sekali");
document.getElementById ("1"). Detachevent ("OnClick", test);
}
</script>
</head>
<body>
<input type = "tombol" value = "vote" id = "1"/>
<type skrip = "Teks/JavaScript">
document.getElementById ("1"). attachEvent ("onClick", test);
</script>
</body>
</html>
Di sini, document.getElementById ("1"). AttachEvent ("ontClick", test); digunakan untuk ikatan acara dinamis, dan kode salinan digunakan sebagai berikut:
Document.getElementById ("1"). Detachevent ("OnClick", Test) secara dinamis membatalkan waktu, sehingga acara ini hanya dapat sesuai sekali, dan tidak ada efek yang akan dihasilkan saat mengklik tombol ini waktu berikutnya.
Selanjutnya, demonstrasi lain dari acara keyboard yang dipantau tepat waktu untuk menentukan apakah inputnya adalah angka. Jika bukan angka, itu akan diminta secara dinamis, dan kemudian menolak inputnya.
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd html 4.01 transisi // en">
<Html>
<head>
<title> test7.html </title>
<type skrip = "Teks/JavaScript">
tes fungsi (peristiwa) {
// Setiap kali pengguna menekan tombol, ia akan menentukan apakah itu angka
if (event.keycode <48 || event.keycode> 57) {
window.alert ("Anda memasuki bukan angka");
mengembalikan false;
}
}
</script>
</head>
<body>
<input type = "text" onkeypress = "return test (event);" /> Harap masukkan nomor
</body>
</html>
Acara di sini adalah objek acara, yang dapat mengembalikan banyak informasi. Silakan merujuk ke dokumen yang relevan untuk detailnya.
Suplemen: Kompatibilitas dalam Pemantauan Acara
1. IE menggunakan metode attachEvent/detachevent untuk menambah dan menghapus pendengar acara; W3C menggunakan metode AddEventListener/RemestEventListener.
2. IE menggunakan metode penamaan OneVent untuk acaranya, sedangkan W3C adalah metode penamaan untuk acara.
3. Pendengar acara IE menggunakan objek acara global, sementara W3C melewati objek acara sebagai parameter bagi pendengar.
4. Untuk menghindari memicu perilaku peristiwa default, pendekatan IE adalah meminta pemrogram untuk mengatur nilai properti ReturnValue di objek acara menjadi false, sedangkan pendekatan W3C adalah menjalankan metode preventdefault.
5. IE tidak memberikan dukungan untuk fase penangkapan acara.
6. Untuk menghentikan pengiriman acara, pendekatan IE adalah mengatur pembatalan objek acara menjadi true, sementara pendekatan W3C adalah untuk mengatur metode stoppropagasi eksekusi.
7. IE memanggil pendengar acara sebagai fungsi independen, sedangkan di W3C disebut sebagai metode objek. Ini berarti bahwa di IE, kata kunci ini dalam acara pendengar tidak menunjuk pada tidak pada objek kejadian peristiwa tetapi objek global yang tidak berguna (objek jendela).
8. IE memiliki masalah kebocoran memori dalam menggunakan pendengar acara. Di IE Browser, jika Anda ingin membuat pendengar acara untuk suatu elemen dan menggunakan elemen itu di pendengar, ruang memori yang ditempati oleh pendengar dan node DOM yang terkait tidak akan dirilis sebelum pengguna memasuki halaman lain.
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.