Metode umum pengikatan peristiwa: pengikatan tradisional, metode pengikatan W3C, dan metode pengikatan yaitu . Namun, apa yang penting bagi kita dalam pengembangan aktual adalah membutuhkan metode pengikatan umum, lintas-browser. Jika kami mencari di internet, kami akan menemukan banyak metode. Berikut adalah beberapa metode yang lebih terkenal:
Sebelum memulai semester, kita harus membahas persyaratan apa yang harus dipenuhi oleh metode addevent () yang baik:
A. Pegangan acara yang sama yang mendukung elemen yang sama dapat mengikat beberapa fungsi mendengarkan;
B. Jika fungsi yang sama terdaftar beberapa kali pada pegangan acara yang sama dari elemen yang sama, semua pendaftaran setelah pendaftaran pertama akan diabaikan;
C. Ini dalam badan fungsi harus menunjuk ke simpul yang memproses acara (seperti simpul yang saat ini menjalankan event handler);
D. Perintah eksekusi fungsi mendengarkan harus dieksekusi dalam urutan terikat;
e. Jangan gunakan Event = Event || window.event; di badan fungsi untuk menormalkan objek peristiwa;
1. Fungsi addevent () yang ditulis oleh John Resig
fungsi addevent (obj, type, fn) {if (obj.attachevent) {obj ['e'+type+fn] = fn; obj [type+fn] = function () {obj ['e'+type+fn] (window.event);} obj.attachevent ('on'+type, obj [type+fn]); } else obj.addeventListener (type, fn, false); } function remeevent (obj, type, fn) {if (obj.detachevent) {obj.detachevent ('on'+type, obj [type+fn]); obj [type+fn] = null; } else obj.removeEventListener (type, fn, false); }Sangat mengejutkan bahwa fungsi ini sangat sederhana dan mudah dimengerti. Maka kita masih perlu melihat lima persyaratan di atas:
Puas dengan poin pertama;
Saya pasti puas dengan poin ketiga dan kelima;
Untuk poin kedua, itu tidak puas karena AddEventListener () mengabaikan pendaftaran duplikat, sementara attachEvent () tidak;
Namun, poin keempat tidak terpenuhi, karena standar DOM tidak menentukan urutan fungsi pemrosesan waktu untuk memanggil objek, sehingga tidak boleh diterima begitu saja bahwa mereka dipanggil dalam urutan pendaftaran.
Tetapi fungsi ini masih merupakan fungsi yang sangat baik.
2. Fungsi addevent () yang ditulis oleh Dean Edward
fungsi addEvent (elemen, ketik, pawang) {if (! handler. $$ guid) handler. $$ guid = addevent.guid ++; if (! element.events) element.events = {}; var handlers = element.events [type]; if (! handlers) {handlers = element.events [type] = {}; if (elemen ["on" + type]) {handlers [0] = elemen ["on" + type]; }} penangan [handler. $$ guid] = handler; elemen ["on" + type] = handleevent;} addevent.guid = 1; function RemeVent (elemen, type, handler) {if (element.events && element.events [type]) {delete element.events [type] [handler. $$ guid]; }} function handleevent (event) {var returnValue = true; event = event || fixEvent (window.event); var handlers = this.events [event.type]; untuk (var i in handlers) {this. $$ handleevent = handlers [i]; if (this. $$ handleevent (event) === false) {returnValue = false; }} return returnValue;}; function fixEvent (event) {event.preventDefault = fixevent.preventdefault; event.stoppropagation = fixevent.stoppropagation; return event;}; fixeVent.preventDefault = function () {this.returnValue = false;}; fixevent.stoppropagation = function () {this.cancelbubble = true;};Fungsi ini menggunakan metode pengikatan tradisional , sehingga berfungsi di semua browser tanpa menyebabkan kebocoran memori.
Tetapi untuk 5 poin yang awalnya diusulkan, fungsi hanya memenuhi empat poin pertama. Hanya poin terakhir yang tidak terpenuhi, karena dalam JavaScript urutan eksekusi untuk/dalam pernyataan tidak ditentukan dalam urutan penugasan, meskipun sebagian besar waktu dieksekusi dalam urutan yang diharapkan, sehingga urutan pernyataan ini mungkin berbeda dalam versi atau implementasi JavaScript yang berbeda.
3. Peningkatan fungsi Dekan Edward's AddEvent ()
Array.prototype.indexof = fungsi (obj) {var result = -1, panjang = this.length, i = panjang - 1; untuk (; i> = 0; i--) {if (this [i] == obj) {result = i; merusak; }} return result;} array.prototype.contains = function (obj) {return (this.indexof (obj)> = 0)} array.prototype.append = function (obj, nodup) {if (! (nodup && this.contains (obj))) {this. }} Array.prototype.remove = fungsi (obj) {var index = this.indexof (obj); if (! index) return; kembalikan this.splice (index, 1);}; function addevent (elemen, type, fun) {if (! element.events) element.events = {}; var handlers = element.events [type]; if (! handlers) {handlers = element.events [type] = []; if (elemen ['on' + type]) {handlers [0] = elemen ['on' + type]; }} handlers.append (fun, true) element ['on' + type] = handleevent;} function remeevent (elemen, type, fun) {if (element.events && element.events [type]) {element.events [type] .remove (fun); }} function handleevent (event) {var returnValue = true, i = 0; event = event || fixEvent (window.event); var handlers = this.events [event.type], length = handlers.length; untuk (; i <panjang; i ++) {if (handlers [i] .call (this, event) === false) {returnValue = false; }} return returnValue;} fixeVent fungsi (event) {event.preventDefault = fixevent.preventDefault; event.stoppropagation = fixevent.stoppropagation; return event;} fixeVent.preventDefault = function () {this.returnValue = false;}; fixevent.stoppropagation = function () {this.cancelbubble = true;};Fungsi ini adalah peningkatan saya pada fungsi Dekan Edward's AddEvent (), yang sepenuhnya memenuhi 5 persyaratan awal. Saya berharap ini akan membantu untuk pembelajaran semua orang. Terima kasih atas bacaan Anda.