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:

Salin kod Kod adalah seperti berikut:

$("#div1").click(function() {
alert("Pencetus selepas klik"); });

Kita boleh melaksanakan pengikatan acara di atas dalam pelbagai cara:

1 pada()

Salin kod Kod adalah seperti berikut:

//Tiada parameter data

$("p").on("klik", function(){
makluman( $(this).text() ); });

//Terdapat parameter data
fungsi myHandler(event) {
alert(event.data.foo);
}
$("p").on("klik", {foo: "bar"}, myHandler)

Sepadan dengan on() dimatikan(), yang digunakan untuk mengalih keluar pengikatan acara:

Salin kod Kod adalah seperti berikut:var foo = function () {

// kod untuk mengendalikan beberapa jenis acara

};
// ... sekarang foo akan dipanggil apabila perenggan diklik ...
$("body").on("klik", "p", foo);

// ... foo tidak lagi dipanggil
$("body").off("klik", "p", foo);

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:

Salin kod Kod adalah seperti berikut:$('#foo').bind('mouseenter mouseleave', fungsi() {

$(this).toggleClass('masuk');

});

Ikat berbilang jenis/pengendali acara serentak:

Salin kod Kod adalah seperti berikut:$("butang").bind({

klik:function(){$("p").slideToggle();},

mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});

Anda boleh menghantar beberapa data tambahan sebelum pengendalian acara.

Salin kod Kod adalah seperti berikut:pengendali fungsi(acara) {

alert(event.data.foo);

}
$("p").bind("klik", {foo: "bar"}, pengendali)

Batalkan tingkah laku lalai dan halang acara daripada menggelegak dengan mengembalikan palsu.

Salin kod Kod adalah seperti berikut:$("form").bind("submit", function( ) { return false; })

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():

Salin kod Kod adalah seperti berikut:

$("#info_table td").live("click", function() {/*Tunjukkan maklumat lanjut*/});

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():

Salin kod Kod adalah seperti berikut:(function($){

$("#info_table td").live("click",function(){/*Tunjukkan maklumat lanjut*/}); })(jQuery);

Di sini, (function($){...})(jQuery) ialah "fungsi tanpa nama yang dilaksanakan serta-merta", membentuk penutupan untuk mengelakkan konflik penamaan. Di dalam fungsi tanpa nama, $parameter merujuk kepada objek jQuery. Fungsi tanpa nama ini tidak menunggu sehingga DOM sedia sebelum dilaksanakan. Ambil perhatian bahawa apabila menggunakan penggodaman ini, skrip mesti dipautkan dan/atau dilaksanakan dalam elemen kepala halaman. Sebab untuk memilih masa ini ialah elemen dokumen tersedia pada masa ini, dan keseluruhan DOM jauh daripada dijana jika skrip diletakkan di hadapan teg isi penutup, ia tidak masuk akal, kerana DOM adalah sepenuhnya tersedia pada masa itu.

Untuk mengelakkan kehilangan prestasi yang disebabkan oleh peristiwa menggelegak, jQuery menyokong penggunaan parameter konteks apabila menggunakan kaedah .live() bermula dari 1.4:

Salin kod Kod adalah seperti berikut:$("td",$("#info_table")[0 ]). langsung("klik",function(){/*Tunjukkan maklumat lanjut*/});

Dengan cara ini, "pemegang amanah" bertukar daripada $(document) lalai kepada $("#info_table")[0], menjimatkan perjalanan yang menggelegak. Walau bagaimanapun, parameter konteks yang digunakan dengan .live() mestilah elemen DOM yang berasingan, jadi objek konteks ditentukan di sini menggunakan $("#info_table")[0], yang diperoleh menggunakan operator indeks tatasusunan.

4. perwakilan()

Seperti yang dinyatakan sebelum ini, untuk menembusi batasan kaedah .bind() tunggal dan melaksanakan delegasi acara, jQuery 1.3 memperkenalkan kaedah .live(). Kemudian, untuk menyelesaikan masalah "rantai penyebaran peristiwa" yang terlalu panjang, jQuery 1.4 menyokong menentukan objek konteks untuk kaedah .live(). Untuk menyelesaikan masalah penjanaan koleksi elemen yang tidak perlu, jQuery 1.4.2 hanya memperkenalkan kaedah baharu.delegate().

Menggunakan .delegate(), contoh sebelumnya boleh ditulis seperti ini:

Salin kod Kod adalah seperti berikut:

$("#info_table").delegate("td"," klik", function(){/*Tunjukkan maklumat lanjut*/});

Menggunakan .delegate() mempunyai kelebihan berikut (atau menyelesaikan masalah berikut bagi kaedah .live()):
Ikat terus pemilih elemen sasaran ("td"), peristiwa ("klik") dan pengendali ke "dragee" $("#info_table"), tanpa pengumpulan elemen tambahan, laluan penyebaran peristiwa yang dipendekkan dan semantik yang jelas; >

Menyokong panggilan selepas kaedah traversal DOM yang digabungkan, iaitu, menyokong $("table").find("#info").delegate..., menyokong kawalan tepat;

Ia boleh dilihat bahawa kaedah .delegate() ialah penyelesaian yang agak sempurna. Tetapi apabila struktur DOM adalah mudah, .live() juga boleh digunakan.

Petua: Apabila menggunakan perwakilan acara, jika pengendali acara lain yang berdaftar pada elemen sasaran menggunakan .stopPropagation() untuk menghalang penyebaran acara, perwakilan acara akan menjadi tidak sah.

unelegate(): Alih keluar pengikatan perwakilan

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.