Mekanisme pengikatan acara baru jQuery pada() contoh application_jquery

Menyemak imbas senarai jQuery yang tidak digunakan hari ini, saya menemui live() dan die() di dalamnya, saya segera melihat dan mendapati bahawa bermula dari jQuery 1.7, jQuery telah memperkenalkan mekanisme pengikatan acara baharu, on() dan off( ). Kedua-dua fungsi mengendalikan pengikatan acara secara seragam. Oleh kerana terdapat bind(), live(), delegate() dan kaedah lain untuk mengendalikan pengikatan acara sebelum ini, jQuery memutuskan untuk melancarkan fungsi baharu untuk menyatukan kaedah mengikat acara dan menggantikan kaedah sebelumnya daripada aspek pengoptimuman prestasi dan penyatuan kaedah .

pada(acara,[pemilih],[data],fn)

acara: Satu atau lebih jenis acara dipisahkan oleh ruang dan ruang nama pilihan, seperti "klik" atau "keydown.myPlugin".

pemilih: Rentetan pemilih untuk turunan elemen pemilih yang mencetuskan acara penapis. Jika pemilih adalah batal atau ditinggalkan, acara sentiasa dicetuskan apabila ia mencapai elemen yang dipilih.

data: Apabila peristiwa dicetuskan, event.data mesti dihantar ke fungsi pemprosesan acara.

fn: Fungsi dilaksanakan apabila acara dicetuskan. Nilai palsu juga boleh digunakan sebagai singkatan untuk fungsi yang mengembalikan palsu.

Ganti bind()

Apabila 'pemilih' parameter kedua adalah batal, pada dasarnya tiada perbezaan dalam penggunaan antara on() dan bind(), jadi kita boleh berfikir bahawa on() hanya mempunyai satu lagi pilihan daripada parameter 'pemilih' bind() , so on() boleh menggantikan bind()

dengan mudah

Ganti secara langsung()

Sebelum 1.4, saya percaya semua orang suka menggunakan live() kerana ia boleh mengikat acara kepada elemen semasa dan akan datang Sudah tentu, selepas 1.4, delegate() juga boleh melakukan perkara yang serupa. Prinsip live() adalah sangat mudah Ia mewakilkan acara melalui dokumen, jadi kami juga boleh menggunakan on() untuk mencapai kesan yang sama seperti live() dengan mengikat acara pada dokumen.

Cara menulis secara langsung()

$('#list li').live('click', '#list li', function() { 
//function code here. 
});

Cara menulis pada()

$(document).on('click', '#list li', function() { 
//function code here. 
});

Kuncinya di sini ialah 'pemilih' parameter kedua sedang berkuat kuasa. Ia bertindak sebagai penapis dan hanya unsur turunan unsur yang dipilih akan mencetuskan acara tersebut.

Ganti perwakilan()
delegate() telah diperkenalkan dalam 1.4, dengan tujuan mewakilkan isu-isu yang mengikat peristiwa unsur keturunan melalui unsur nenek moyang Pada tahap tertentu, ia mempunyai kelebihan yang sama untuk live(). Cuma live() diwakilkan melalui elemen dokumen dan perwakilan boleh menjadi sebarang nod nenek moyang. Kaedah penulisan menggunakan on() untuk melaksanakan proksi pada asasnya adalah sama seperti delegate().

Cara menulis delegate()

$('#list').delegate('li', 'click', function() { 
//function code here. 
});

Cara menulis pada()

$('#list').on('click', 'li', function() { 
//function code here. 
});

Nampaknya susunan parameter pertama dan kedua telah diterbalikkan, tetapi semua yang lain pada dasarnya sama.

Ringkasan

jQuery dilancarkan pada() untuk dua tujuan, satu adalah untuk menyatukan antara muka, dan satu lagi adalah untuk meningkatkan prestasi, jadi mulai sekarang, gunakan on() untuk menggantikan bind(), live(), dan perwakilan. Khususnya, jangan gunakan live() lagi, kerana ia sudah berada dalam senarai yang tidak digunakan dan akan dibunuh pada bila-bila masa. Jika anda hanya mengikat acara sekali, kemudian gunakan one(), tiada perubahan.