Kami dapat menyesuaikan acara untuk mencapai pengembangan yang lebih fleksibel. Acara bisa menjadi alat yang sangat kuat saat digunakan dengan benar. Pengembangan berbasis peristiwa memiliki banyak keunggulan (diperkenalkan kemudian).
Fungsi dengan acara khusus adalah acara, CustomEvent, dan DispatchEvent.
Kustomisasi acara secara langsung, menggunakan konstruktor acara:
var event = event baru ('build'); // dengarkan untuk event.elem.addeventListener ('build', function (e) {...}, false); // pengiriman acara.elem.discatchevent (event);CustomEvent dapat membuat acara yang lebih disesuaikan, dan juga dapat disertai dengan beberapa data. Penggunaan spesifiknya adalah sebagai berikut:
var myevent = customEvent baru (eventName, opsi);
Dimana opsi bisa:
{detail: {...}, Bubbles: true, contalable: false}Detailnya dapat menyimpan beberapa informasi inisialisasi dan dapat dipanggil saat dipicu. Properti lain adalah untuk menentukan apakah acara tersebut memiliki fungsi menggelegak dan lainnya.
Acara bawaan akan dipicu oleh browser sesuai dengan operasi tertentu, dan acara yang disesuaikan perlu dipicu secara manual. Fungsi SRIPATCHEVEN digunakan untuk memicu suatu peristiwa:
element.dispatchevent (CustomEvent);
Kode di atas menunjukkan bahwa acara CustomEvent dipicu pada elemen. Bersama -sama, gunakan itu:
// Tambahkan peristiwa yang sesuai listenerobj.addeventListener ("cat", function (e) {proses (e.detail)}); // buat dan kirim acara EventVar = CustomEvent baru ("Cat", {"Detail": {"Hazcheeseburger": True}}); obj.dispatcatchent (evente): true}}); obj.dispatcatchent (evente): true}}); obj.dispatcatcing (evente): true}}); obj.dispatcatchent (evente): true}}); obj.dispatcatchent (evente): true}); obj.dispatcatchent (evente): true}); obj.dispatcatchent (evente): true}); obj.dispatcatchent (evente);Gunakan acara khusus untuk memperhatikan masalah kompatibilitas, tetapi menggunakan jQuery jauh lebih sederhana:
// Bind Custom Event $ (element) .on ('mycustomevent', function () {}); // pemicu peristiwa $ (elemen) .trigger ('mycustomevent'); Selain itu, Anda dapat melewati lebih banyak informasi parameter saat memicu acara khusus: $ ("p") .on ("mycustomevent", function (event, myname) {$ (this) .text (myname + ", hai di sana!");}); $ ("Tombol") .klick (function () {$ $ ("p").Acara kustom JavaScript berbeda dari acara yang harus dibayar sendiri seperti klik dan kirim. Sebelum menggambarkan manfaat acara khusus, mari kita lihat contoh acara khusus:
<Div id = "testbox"> </div> // buat acara var evt = document.createEvent ('event'); // define event type evt.initevent ('customEvent', true, true); // dengarkan peristiwa var obj = document.geteLementById ('testbox'); obj.addeventener ('customEvent (' customeVent ('testbox'); obj.addeventener ('customEvent (' customeVent ('testbox'); obj.addeventener ('customEvent (' customeVent ('testbox'); obj.addeventener ('customEvent (' coustEvent) ('function'); console. dipicu ');}, false);Untuk efek tertentu, Anda dapat memeriksa demo. Masukkan obj.dispatchevent (EVT) di konsol. Anda dapat melihat bahwa output "peristiwa CustomEvent yang dipicu" di konsol, menunjukkan bahwa acara khusus dipicu dengan sukses.
Dalam proses ini, metode CreateEvent membuat acara kosong EVT, kemudian menggunakan metode initevent untuk mendefinisikan jenis acara sebagai acara khusus yang disepakati, dan kemudian mendengarkan elemen yang sesuai. Kemudian, gunakan DispatchEvent untuk memicu acara tersebut.
Itu benar, mekanisme acara khusus seperti acara normal - mendengarkan acara, menulis operasi panggilan balik, dan menjalankan panggilan balik setelah memicu acara. Tetapi perbedaannya adalah bahwa peristiwa kustom sepenuhnya dikendalikan oleh kami, yang berarti bahwa decoupling JavaScript diimplementasikan. Kami dapat mengontrol banyak operasi yang terkait tetapi secara logis kompleks menggunakan mekanisme peristiwa khusus.
Tentu saja, Anda mungkin telah menebak bahwa kode di atas tidak berlaku dalam versi IE yang lebih rendah. Faktanya, CreateEvent () tidak didukung dalam versi IE8 dan di bawah IE, tetapi ada metode pemadam kebakaran pribadi () dari IE, tetapi sayangnya, FireEvent hanya mendukung pemicu peristiwa standar. Oleh karena itu, kami hanya dapat menggunakan satu metode khusus dan sederhana untuk memicu acara khusus.
// Type adalah acara khusus, seperti type = 'CustomEvent', callback adalah fungsi callback yang sebenarnya ditentukan oleh pengembang obj [type] = 0; obj [type] ++; obj.attachevent ('onpropertychange', function (event) {if (event.propertyname == type) {callback.call (obj);}});Prinsip metode ini sebenarnya adalah menambahkan properti khusus ke DOM dan mendengarkan acara PropertyChange dari elemen tersebut. Ketika nilai properti tertentu di DOM berubah, callback PropertyChange akan dipicu, dan kemudian dalam panggilan balik ditentukan apakah properti yang diubah adalah properti khusus kami. Jika demikian, panggilan balik yang sebenarnya ditentukan oleh pengembang akan dieksekusi. Ini mensimulasikan mekanisme acara khusus.
Untuk mengaktifkan mekanisme acara khusus untuk bekerja sama dengan pendengaran dan simulasi pemicu peristiwa standar, mekanisme acara lengkap diberikan di sini. Mekanisme ini mendukung pemantauan acara standar dan acara khusus, dan menghilangkan operasi pemicu yang mendengarkan dan disimulasikan. Perlu dicatat bahwa untuk membuat logika kode lebih jelas, disepakati bahwa acara khusus memiliki awalan 'kustom' (misalnya: CustomTest, CustomAlert).
/ *** @Description berisi acara mendengarkan, penghapusan dan simulasi acara yang dipicu, panggilan rantai pendukung**/ (fungsi (jendela, tidak terdefinisi) {var ev = window.ev = window. $ = fungsi (elemen) {return ev.fn.inype. 1)? _that.element.addeventListener (type, callback, false);} else if (_that.element.attachevent) { / ** * @supported untuk IE5+ * / // Pemrosesan Kustom (_ Type.indexof ('Custom')! = -1) {ISNAN (_THTE. } var fnev = event) {event = event: window.event if (event.propertyname == type) {callback.call (_that.element); ! _that.element ['callback' + callback]) {_that.element ['callback' + callback] = fnev; 5 _that.element.removeEventListener (ketik, callback, false);} lain jika (_that.element.detachevent) { / ** * @supported untuk IE5+ * / / Custom event pemrosesan jika (type.indexof (custom ')! = _that.element.detachevent ('onpropertychange', _that.element ['callback' + callback]); / *** @supted untuk orang lain* / _that.element ['on' + type] = null; if (_that.element.dispatchevent) {// Buat acara var evt = document.createEvent ('event'); type.indexof (custom ')! = -1) {_that.element [type] ++ Test Case 1 (custom event test) // Test Case 1 (custom event test) // Introduce event mechanism // ...// Catch DOMvar testBox = document.getElementById('testbox');// Callback function 1function triggerEvent(){ console.log('Triggered a custom event customConsole');}// Callback function 2function triggerAgain(){ console.log('Triggered a custom event CustomConsole ');} // Encapsulation testbox = $ (testbox); // Bind dua fungsi callback pada saat yang sama, panggilan rantai pendukung ke testbox.add (' customConsole ', triggerEvent) .add (' customConsole ', triggeragain);Kode lengkap dalam demo.
Setelah membuka demo, hubungi testbox.trigger ('CustomConsole') di konsol untuk memicu acara khusus dengan sendirinya. Anda dapat melihat bahwa konsol menghasilkan dua prompt, dan kemudian masuk testbox.remove ('CustomConsole', TriggerAgain) untuk menghapus pendengar berikutnya. Saat ini, gunakan testbox.trigger ('CustomConsole') untuk memicu acara khusus. Anda dapat melihat bahwa konsol hanya menghasilkan satu prompt, yaitu, pendengar berikutnya berhasil dihapus. Semua fungsi mekanisme acara bekerja secara normal.