JQuery Trigger () Kaedah: Cara Membuat Acara Custom dalam JQuery

3Dalam artikel saya sebelumnya, Cara Membuat Acara Kustom di JavaScript , kami membincangkan manfaat peristiwa tersuai dan objek CustomEvent asli. Untuk merakam, kita boleh membakar acara bernama kita sendiri. Halaman Demonstation menyediakan satu borang yang melancarkan acara "Newmessage" setiap kali mesej yang sah diserahkan. Mana -mana bilangan pengendali boleh melanggan acara ini untuk melakukan tindakan mereka sendiri. Satu -satunya masalah kami: CustomEvent tidak disokong pada Safari atau Internet Explorer. Ada cara di sekitar isu keserasian penyemak imbas. Satu penyelesaian adalah untuk menulis fungsi enkapsulasi acara anda sendiri yang melaksanakan fungsi acara tersuai. Nasib baik, tidak ada keperluan: Acara tersuai disokong di beberapa perpustakaan JavaScript termasuk jQuery. Kaedah JQuery's .trigger adalah kunci. Anda boleh mencetuskan peristiwa dengan nama jenis baru dan data sewenang -wenangnya pada bila -bila masa, mis.

$.event.trigger({
	type: "newMessage",
	message: "Hello World!",
	time: new Date()
});

Pengendali kini boleh melanggan acara "NewMessage", mis.

$(document).on("newMessage", newMessageHandler);

Halaman demonstrasi

Contoh ini menunjukkan kod jQuery: Lihat halaman demonstrasi peristiwa adat jQuery Pengendali acara standard mencari penyerahan pada borang HTML. Fungsi ini mendapat mesej semasa dan, dengan mengandaikan ia sah, menghantar acara "NewMessage" baru.

$("#msgbox").on("submit", SendMessage);

// new message: raise newMessage event
function SendMessage(e) {

	e.preventDefault();
	var msg = $("#msg").val().trim();
	if (msg) {
		$.event.trigger({
			type: "newMessage",
			message: msg,
			time: new Date()
		});
	}

}

Pengendali kini boleh melanggan acara "NewMessage". Acara ini hanya dibangkitkan jika ada mesej yang sah:

// newMessage event subscribers
$(document).on("newMessage", newMessageHandler);

// newMessage event handler
function newMessageHandler(e) {
	LogEvent(
		"Event subscriber on "+e.currentTarget.nodeName+", "
		+e.time.toLocaleString()+": "+e.message
	);
}

Mesej itu sendiri boleh diekstrak dari harta mesej objek acara.

Keserasian penyemak imbas

Kaedah JQuery 1.x dijalankan di mana -mana pelayar termasuk Internet Explorer 6.0 dan ke atas. Jelas sekali itu bonus yang besar walaupun kod berjalan (un-noticeably) lebih perlahan daripada customevents asli. Walau bagaimanapun, sedar bahawa JQuery 2.0, yang dirancang untuk dibebaskan pada tahun 2013, tidak akan menyokong IE6, 7 dan 8. JQuery popular, tetapi acara tersuai disokong di kebanyakan perpustakaan JavaScript termasuk prototaip, mootools dan yui . Dan jika anda suka membaca siaran ini, anda akan suka dipelajari; Tempat untuk mempelajari kemahiran dan teknik segar dari Sarjana. Ahli -ahli mendapat akses segera ke semua ebook dan kursus dalam talian interaktif SitePoint, seperti JQuery: Novice to Ninja: Tendangan dan Trik Baru. Komen mengenai artikel ini ditutup. Ada soalan mengenai jQuery? Mengapa tidak bertanya di forum kami?

Soalan Lazim (Soalan Lazim) Mengenai JQuery Custom Events

Apakah peristiwa adat jQuery dan mengapa mereka penting? Mereka adalah penting kerana mereka menyediakan cara untuk merangkum tingkah laku yang boleh digunakan semula di bahagian -bahagian yang berlainan aplikasi. Ini boleh membawa kepada kod yang lebih bersih dan lebih mengekalkan dengan mengurangkan pertindihan dan mempromosikan pemisahan kebimbangan.

Bagaimana saya membuat acara tersuai dalam jQuery?

Membuat acara tersuai di jQuery adalah mudah. Anda boleh menggunakan kaedah .trigger () untuk mencetuskan acara tersuai. Berikut adalah contoh mudah:

$ (dokumen). Bagaimanakah saya dapat menyampaikan data ke pengendali acara tersuai dalam jQuery?
$ (dokumen). diserahkan kepada pengendali acara. Kaedah .on (). Berikut adalah contoh:

$ (dokumen) .on ('myCustomEvent', fungsi (acara, data) {

console.log (data.key); // 'nilai'

}) ;

Dalam contoh ini, fungsi yang diberikan kepada kaedah .on () adalah pengendali acara. JQuery?

Ya, anda boleh menghentikan acara tersuai daripada menyebarkan jQuery dengan memanggil kaedah .Stoppropagation () pada objek acara. Berikut adalah contoh:

$ (dokumen) .on ('myCustomEvent', function (event) {

event.stoppropagation (); ); , kaedah stoppropagation () menghalang peristiwa dari menggelegak pokok dom. jQuery?

Ya, anda boleh menghalang tindakan lalai acara tersuai dalam jQuery dengan memanggil kaedah .PreVentDefault () pada objek acara. Berikut adalah contoh:

$ (dokumen) .on ('myCustomEvent', function (event) {
event.PreventDefault (); , kaedah pencegahanDefault () menghalang tindakan lalai yang berkaitan dengan peristiwa.
Ya, anda boleh mencetuskan acara tersuai hanya sekali dalam jQuery dengan menggunakan kaedah satu () bukan kaedah .on (). Berikut adalah contoh:

$ (dokumen) .one ('myCustomEvent', function () {

console.log ('Ini hanya akan dilogasi sekali.'); 🎜>

Dalam contoh ini, pengendali acara hanya akan dipanggil sekali, walaupun 'mycustomEvent' dicetuskan beberapa kali. Pengendali Acara di JQuery?

Ya, anda boleh mengeluarkan pengendali acara tersuai dalam jQuery dengan menggunakan kaedah .off (). Berikut adalah contoh:

$ (dokumen) .off ('myCustomEvent'); Bolehkah saya mencetuskan peristiwa tersuai secara manual dalam jQuery?
Ya, anda boleh mencetuskan peristiwa tersuai secara manual dalam jQuery dengan menggunakan .rigger () kaedah. Berikut adalah contoh:

$ (dokumen) .trigger ('myCustomEvent');

Bolehkah saya mengikat beberapa pengendali ke acara tersuai dalam jQuery? Berikut adalah contoh:

$ (dokumen) .on ('myCustomEvent', function () {
console.log ('handler 1'); $ (dokumen) .on ('myCustomEvent', function () { console.log ('pengendali 2 ');
});

Atas ialah kandungan terperinci JQuery Trigger () Kaedah: Cara Membuat Acara Custom dalam JQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!