Pemicu acara dapat dipahami dengan baik secara harfiah, dan digunakan untuk memicu peristiwa, tetapi beberapa teman yang belum menggunakannya mungkin bingung. Apakah acara biasanya dipicu oleh operasi pengguna yang sebenarnya di halaman? Pandangan ini tidak sepenuhnya benar, karena beberapa acara harus diimplementasikan oleh program, seperti acara khusus, dan beberapa acara kustom dari kerangka AJAX JQuery harus diimplementasikan oleh pemicu acara. Tentu saja, dalam beberapa kasus khusus, lebih nyaman untuk menggunakan pemicu acara untuk memicu peristiwa daripada memicu peristiwa dengan operasi aktual pengguna.
Browser memiliki metode asli untuk mendukung implementasi pemicu acara, tetapi ada perbedaan besar dalam kompatibilitas. Masalah kompatibilitas ini sepenuhnya diharapkan. IE memiliki metode sendiri, dan browser standar lainnya juga memiliki serangkaian metode. Belum lagi metode siapa yang baik atau buruk, untuk pengembang web, itu adalah siksaan bagi pengembang untuk mengembangkan beberapa metode. IE mendukung metode FireEvent untuk mengimplementasikan pemicu acara, browser standar mendukung DispatchEvent untuk mengimplementasikan pemicu acara, dan keduanya mendukung IE9. Berikut ini adalah kode sumber dari prototipe.js (sebenarnya saya menyalinnya dari blog Situ Zhengmei):
Salinan kode adalah sebagai berikut:
var fireevent = function (elemen, event) {
if (document.createeventObject) {
// IE Browser Mendukung Metode FireEvent
var evt = document.createEventObject ();
return element.fireevent ('on'+event, evt)
}
kalau tidak{
// browser standar lainnya menggunakan metode SPATCATCHEVENT
var evt = document.createEvent ('htmlevents');
// initevent menerima 3 parameter:
// jenis acara, apakah itu menggelegak, apakah itu menghalangi perilaku default browser
evt.Initevent (peristiwa, benar, benar);
Return! Element.DispatchEvent (EVT);
}
};
Metode di atas kompatibel dengan browser utama untuk mengimplementasikan fungsi pemicu acara. Namun, untuk beberapa sistem pemrosesan acara yang dienkapsulasi, seperti modul peristiwa jQuery, itu tidak sesederhana itu, dan hanya dapat diimplementasikan melalui simulasi. Saya menulis sistem pemrosesan acara yang sangat sederhana sebelumnya, dan baru -baru ini menemukan perlunya acara khusus, jadi saya mensimulasikan pemicu acara berdasarkan sistem acara sebelumnya, dan kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
/**
* Pemicu acara
* @param {objek} elemen DOM
* @param {string / objek} event type / event objek
* @param {array} parameter tambahan yang diteruskan ke fungsi pawang acara
* @param {boolean} apakah itu menggelegak
*/
Trigger: Function (elem, event, data, isStopPropagation) {
var type = event.type || peristiwa,
// elemen induk gelembung, semua cara untuk mendokumentasikan, jendela
Parent = elem.parentnode ||
elem.OwnerDocument ||
elem === elem.OwnerDocument && win,
EventHandler = $ .data (elem, type + 'handler');
isStopPropagation = TypeOf data === 'Boolean'?
Data: (isStopPropagation || false);
data = data && isArray (data)? Data: [];
// Buat objek acara khusus
event = typeof event === 'objek'?
peristiwa : {
Ketik: Ketik,
PreventDefault: noop,
stoppropagation: function () {
isStoppropagation = true;
}
};
event.target = elem;
data.unshift (acara);
if (eventhandler) {
eventhandler.call (elem, data);
}
// Secara rekursif memanggil dirinya sendiri untuk mensimulasikan gelembung
if (parent &&! iSstopPropagation) {
data.shift ();
this.trigger (induk, peristiwa, data);
}
}
Prinsip simulasi tidak sulit. Bind fungsi penanganan acara ke elemen tertentu. Jika ada operasi aktual memicu suatu peristiwa, fungsi penanganan acara yang sesuai akan dijalankan. Oleh karena itu, untuk mencapai fungsi pemicu peristiwa, cukup dapatkan fungsi penanganan acara yang sesuai dan jalankannya. Ini adalah yang paling mendasar.
Ketika peristiwa aktual terjadi, browser akan menghasilkan objek peristiwa, yang berisi beberapa atribut dan informasi ketika peristiwa terjadi. Jika tidak ada peristiwa aktual, tidak ada objek acara, jadi kode di atas juga membuat objek acara untuk memenuhi fungsi paling dasar.
Ada juga peristiwa yang menggelembung. Jika tidak ada peristiwa aktual, secara alami tidak akan ada perilaku gelembung. Kemudian jika Anda ingin mensimulasikan fungsi gelembung, Anda harus terus -menerus mencari elemen induk dan memeriksa apakah jenis acara yang sama terikat sampai dokumen dan jendela. Jika strukturnya rumit, kinerja metode panggilan rekursif ini diperkirakan tidak terlalu baik.
Akhirnya, ada perilaku default browser. Saya pikir cukup merepotkan untuk mensimulasikan ini, sangat merepotkan sehingga saya tidak tahu bagaimana mengimplementasikannya. Misalnya, lompatan default tag. Saya menguji pemicu jQuery, tetapi itu tidak diimplementasikan, tetapi beberapa perilaku lain tampaknya diperkenalkan dalam manual API. Lagi pula, fungsi ini tidak terlalu penting, dan saya belum melakukan banyak penelitian mendalam.