Bagaimana cara meneruskan parameter ke event handler? Ketika saya pertama kali mengenal Javascript, saya sering mengalami masalah ini karena saya tidak memiliki pemahaman mendalam tentang penutupan.
Masalah seperti ini sering saya jumpai dalam kelompok diskusi, sebagai berikut:
Copy kode kodenya sebagai berikut:
<!DOCTYPE HTML>
<html>
<kepala>
<meta charset="utf-8">
<title>Bagaimana cara meneruskan parameter ke event handler? </judul>
</kepala>
<tubuh>
<a href="#" id="aa">Klik saya</a>
<skrip tipe="teks/javascript">
var E = {
pada : function(el, ketik, fn){
el.addEventListener?
el.addEventListener(ketik, fn, salah):
el.attachEvent("aktif" + ketik, fn);
},
un : fungsi(el,ketik,fn){
el.removeEventListener?
el.removeEventListener(ketik, fn, salah):
el.detachEvent("aktif" + ketik, fn);
}
};
var v1 = 'jack', v2 = 'lily';
pengendali fungsi(arg1,arg2){
peringatan(arg1);
peringatan(arg2);
}
// Bagaimana cara meneruskan parameter v1 dan v2 ke handler?
//Objek event default akan diteruskan sebagai parameter pertama dari handler.
//Saat ini, hal pertama yang muncul saat mengklik link adalah objek event, dan yang kedua tidak terdefinisi.
E.on(document.getElementById('aa'),'klik',handler);
</skrip>
</tubuh>
</html>
Bagaimana cara meneruskan parameter v1 dan v2 ke handler? Objek event default akan diteruskan sebagai parameter pertama dari handler. Saat mengklik link, hal pertama yang muncul adalah objek event, dan yang kedua tidak ditentukan.
Opsi 1, objek acara tidak dipertahankan dan diteruskan sebagai parameter pertama
Copy kode kodenya sebagai berikut:
pengendali fungsi(arg1,arg2){
peringatan(arg1);
peringatan(arg2);
}
E.on(document.getElementById('aa'),'click',function(){
pengendali(arg1,arg2);
});
Opsi 2, pertahankan objek acara sebagai parameter pertama
Copy kode kodenya sebagai berikut:
pengendali fungsi(e,arg1,arg2){
peringatan(e);
peringatan(arg1);
peringatan(arg2);
}
E.on(document.getElementById('aa'),'click',function(e){
pengendali(e,arg1,arg2);
});
Opsi 3: Tambahkan getCallback ke Function.prototype tanpa mempertahankan objek acara
Copy kode kodenya sebagai berikut:
Fungsi.prototipe.getCallback = function(){
var _ini = ini, args = argumen;
fungsi pengembalian(e) {
return _this.apply(ini || jendela, args);
};
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));
Opsi 4: Tambahkan getCallback ke Function.prototype dan pertahankan objek acara sebagai parameter pertama.
Copy kode kodenya sebagai berikut:
Fungsi.prototipe.getCallback = function(){
var _ini = ini, args = [];
for(var i=0,l=argumen.panjang;i<l;i++){
args[i+1] = argumen[i];
}
fungsi pengembalian(e) {
args[0] = e;
return _this.apply(ini || jendela, args);
};
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));