mengikat acara jQuery dan mewakilkan examples_jquery

Contoh dalam artikel ini menerangkan pengikatan dan delegasi acara jQuery. Kongsikan dengan semua orang untuk rujukan anda. Kaedah khusus adalah seperti berikut:

Pengikatan dan delegasi acara JQuery boleh dilaksanakan menggunakan pelbagai kaedah, on() , bind() , live() , delegate() , dan one().

Kadangkala kita mungkin mengikat acara seperti ini:

Kita boleh melaksanakan pengikatan acara di atas dalam pelbagai cara:

1 pada()

//Tiada parameter data Sepadan dengan on() dimatikan(), yang digunakan untuk mengalih keluar pengikatan acara:

// kod untuk mengendalikan beberapa jenis acara mati(): keluarkan ikatan oleh on() one(): hanya mengikat sekali.

2. mengikat()
Parameter:

(taip,[data],fungsi(eventObject))

jenis: Rentetan yang mengandungi satu atau lebih jenis acara, dengan berbilang acara dipisahkan oleh ruang. Contohnya, "klik" atau "serahkan", atau nama acara tersuai.
data: Objek data tambahan dihantar ke objek acara sebagai nilai atribut event.data

fn: Fungsi pengendali terikat pada acara setiap elemen padanan

(taip,[data],palsu)
jenis: Rentetan yang mengandungi satu atau lebih jenis acara, dengan berbilang acara dipisahkan oleh ruang. Contohnya, "klik" atau "serahkan", atau nama acara tersuai.
data: Objek data tambahan dihantar ke objek acara sebagai nilai atribut event.data

false: Menetapkan parameter ketiga kepada false melumpuhkan tindakan lalai.

Ikat berbilang jenis acara pada masa yang sama:

$(this).toggleClass('masuk'); Ikat berbilang jenis/pengendali acara serentak:

klik:function(){$("p").slideToggle();}, Anda boleh menghantar beberapa data tambahan sebelum pengendalian acara.

alert(event.data.foo); Batalkan tingkah laku lalai dan halang acara daripada menggelegak dengan mengembalikan palsu.

Masalah dengan ikatan

Jika terdapat 10 lajur dan 500 baris dalam jadual di mana peristiwa klik terikat, maka mencari dan melintasi 5000 sel akan menyebabkan kelajuan pelaksanaan skrip menjadi perlahan dengan ketara, dan menyimpan 5000 elemen td dan pengendali acara yang sepadan juga akan Mengambil meningkatkan banyak ingatan (sama seperti semua orang berdiri di depan pintu menunggu penghantaran).

Berdasarkan contoh sebelumnya, jika kita ingin melaksanakan aplikasi album foto ringkas, setiap halaman hanya memaparkan lakaran kenit 50 foto (50 sel) dan pengguna mengklik pautan "Halaman x" (atau "Halaman Seterusnya") boleh secara dinamik memuatkan 50 gambar lagi dari pelayan melalui Ajax. Dalam kes ini, nampaknya peristiwa mengikat untuk 50 sel menggunakan kaedah .bind() boleh diterima semula.

Ini tidak berlaku. Menggunakan kaedah .bind() hanya akan mengikat peristiwa klik kepada 50 sel pada halaman pertama Sel dalam halaman berikutnya yang dimuatkan secara dinamik tidak akan mempunyai peristiwa klik ini. Dalam erti kata lain, .bind() hanya boleh mengikat acara kepada elemen yang sudah wujud apabila ia dipanggil dan tidak boleh mengikat acara kepada elemen yang akan ditambahkan pada masa hadapan (sama seperti bagaimana pekerja baharu tidak boleh menerima penghantaran ekspres).

Delegasi acara dapat menyelesaikan dua masalah di atas. Khusus untuk kod, hanya gunakan kaedah .live() yang baru ditambahkan dalam jQuery 1.3 dan bukannya kaedah .bind():

Kaedah .live() di sini akan mengikat acara klik pada objek $(document) (tetapi ini tidak boleh dicerminkan daripada kod. Ini juga merupakan sebab penting mengapa kaedah .live() telah dikritik. Kami akan membincangkannya secara terperinci kemudian. ), dan anda hanya perlu mengikat $(document) sekali (bukan 50 kali, apatah lagi 5000 kali), dan kemudian anda boleh mengendalikan acara klik sel foto yang dimuatkan secara dinamik. Apabila menerima sebarang acara, objek $(document) akan menyemak jenis acara dan sasaran acara Jika ia adalah acara klik dan sasaran acara ialah td, maka pengendali yang diwakilkan kepadanya akan dilaksanakan.

unbind(): Mengeluarkan pengikatan yang dilakukan oleh bind.

3. secara langsung()

Setakat ini, semuanya kelihatan sempurna. Malangnya, ini tidak berlaku. Oleh kerana kaedah .live() tidak sempurna, ia mempunyai kelemahan utama berikut:
Fungsi $() akan mencari semua elemen td dalam halaman semasa dan mencipta objek jQuery Namun, koleksi elemen td ini tidak digunakan semasa mengesahkan sasaran acara Sebaliknya, ungkapan pemilih digunakan untuk membandingkan dengan event.target atau nenek moyangnya elemen, jadi Menjana objek jQuery ini akan menyebabkan overhead yang tidak perlu; Secara lalai, peristiwa terikat kepada elemen $(document) Jika struktur bersarang DOM sangat dalam, peristiwa yang menggelegak melalui sejumlah besar elemen nenek moyang akan menyebabkan kehilangan prestasi; Ia hanya boleh diletakkan selepas elemen yang dipilih secara langsung dan tidak boleh digunakan selepas kaedah traversal DOM berturut-turut, iaitu, $("#info_table td").live... boleh digunakan, tetapi $("#info_table") .cari("td" ).langsung...Tidak;
Kumpul elemen td dan buat objek jQuery, tetapi operasi sebenar ialah objek $(document), yang membingungkan.
Penyelesaiannya
Untuk mengelakkan menjana objek jQuery yang tidak diperlukan, anda boleh menggunakan penggodaman yang dipanggil "delegasi awal", iaitu memanggil .live() di luar kaedah $(document).ready():

$("#info_table td").live("click",function(){/*Tunjukkan maklumat lanjut*/}); })(jQuery); Untuk mengelakkan kehilangan prestasi yang disebabkan oleh peristiwa menggelegak, jQuery menyokong penggunaan parameter konteks apabila menggunakan kaedah .live() bermula dari 1.4: