Penjelasan terperinci tentang penggunaan mengikat acara jQuery (dengan perbezaan antara bind dan live)_jquery

Artikel ini menganalisis penggunaan pengikatan acara jQuery dengan contoh. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

html:

<a href="#" onclick="addBtn()">addBtn</a>
<div id="mDiv">
  <button class="cBtn" onclick="alert(11111)">button1</button>
  <button class="cBtn">button2</button>
  <button class="cBtn">button3</button>
</div>

javascript:

<script type="text/javascript">
 function addBtn(){
   $('#mDiv').append(' <button class="cBtn">button5</button>')
 }
jQuery(function($){
//使用on代替live和delegate（live由于性能原因已经被废弃，被delegate代替）,新添加到mDiv的button依然会有绑定的事件
$('#mDiv').on('click','.cBtn',function(index, eleDom){
alert($(this).html())
 });
//使用on代替bind
$('.cBtn').on('click',function(){
alert($(this).html())
 })
//注意：
/*
1、无论使用bind、on、delegate、click(function())都是重复绑定，即绑定的同类型事件被放到一个事件队列中，依次执行，后绑定的事件不会替换之前绑定的，对于on使用off，delegate用undelegate，bind及click使用unbind来解除绑定，例如unbind(type)传递为事件类型，如果不传type则解出所有事件绑定；需要注意的是元素本身自带的事件无法unbind（如button1）
2、要绑定自定义事件，如'open'，以上函数都可以使用，但激活需要使用trigger
总结：
建议使用on函数，绑定形式为$('.myClass').on({
click:function(eleDom){
...do someting...
},
dbclick:function(eleDom){
...do someting...
}
....
})
*/
}
</script>

Beberapa nota:

bind(type,[data],fn) mengikat pengendali acara pada acara tertentu untuk setiap elemen yang dipadankan

Salin kod Kod adalah seperti berikut:

$("a").bind("click" ,function( ){alert("ok");});

live(type,[data],fn) melampirkan pengendali acara pada semua elemen padanan, walaupun jika elemen itu ditambahkan kemudian

Salin kod Kod adalah seperti berikut:

$("a").live("click" ,function( ){alert("ok");});

delegate(selector,[type],[data],fn) menambahkan satu atau lebih pengendali acara pada elemen yang ditentukan (elemen anak bagi elemen yang dipilih) dan menentukan fungsi untuk dijalankan apabila peristiwa ini berlaku

Salin kod Kod adalah seperti berikut:

$("#container").delegate("a "," klik", function(){alert("ok");})

pada(acara,[pemilih],[data],fn) Fungsi pengendali acara yang mengikat satu atau lebih acara pada elemen yang dipilih

Perbezaan:

.bind() terikat terus pada elemen

.live() terikat pada elemen melalui gelembung. Lebih sesuai untuk jenis senarai, terikat pada nod DOM dokumen. Kelebihan .bind() ialah ia menyokong data dinamik.

.delegate() ialah proksi acara yang lebih tepat untuk kegunaan berskala kecil dan prestasinya lebih baik daripada .live()

.on() ialah versi 1.9 terbaharu yang menyepadukan tiga kaedah sebelumnya bagi mekanisme mengikat peristiwa baharu

Tambahan: Perbezaan antara mengikat dan hidup

Terdapat tiga cara untuk mengikat acara dalam jQuery: ambil acara klik sebagai contoh

(1)target.click(function(){});

(2)target.bind("klik",function(){});

(3)target.live("klik",fungsi(){});

Kaedah pertama mudah difahami Malah, ia serupa dengan penggunaan JS biasa, cuma satu tiada

Kaedah kedua dan ketiga adalah semua peristiwa yang mengikat, tetapi mereka sangat berbeza Mari kita fokus pada menerangkannya di bawah, kerana ini banyak digunakan jika anda menggunakan rangka kerja jQuery.

【Perbezaan antara mengikat dan hidup】

Kaedah langsung sebenarnya adalah varian daripada kaedah ikatan Fungsi asasnya adalah sama dengan kaedah ikatan Kedua-duanya mengikat suatu peristiwa kepada unsur, tetapi kaedah ikatan hanya boleh mengikatnya pada elemen yang sedia ada adalah tidak sah untuk elemen yang baru dijana oleh JS dan kaedah lain selepas itu Kaedah langsung hanya menebus kelemahan kaedah ikatan ini Ia juga boleh mengikat peristiwa yang sepadan dengan unsur yang dihasilkan kemudian. Jadi bagaimanakah ciri kaedah langsung ini dilaksanakan? Mari kita bincangkan prinsip pelaksanaannya di bawah.

Sebab kaedah langsung juga boleh mengikat peristiwa yang sepadan dengan unsur yang dijana kemudian dikaitkan dengan "delegasi acara" yang dipanggil "delegasi acara" bermakna peristiwa yang terikat kepada unsur nenek moyang boleh diikat kepada unsur keturunan untuk digunakan . Mekanisme pemprosesan kaedah langsung adalah untuk mengikat acara pada nod akar pokok DOM dan bukannya mengikatnya secara langsung kepada elemen. Berikan satu contoh untuk menggambarkan:

$(".clickMe").live("click",fn);
$("body").append("<div class='clickMe'>测试live方法的步骤</div>");

Apabila kita mengklik pada elemen baharu ini, langkah berikut akan berlaku:

(1) Hasilkan acara klik dan serahkannya kepada div untuk diproses

(2) Memandangkan tiada peristiwa yang terikat secara langsung dengan div, acara itu berbuih terus ke pepohon DOM

(3) Peristiwa terus menggelembung ke nod akar pokok DOM Secara lalai, acara klik terikat pada nod akar

(4) Laksanakan acara klik yang terikat dengan langsung

(5) Kesan sama ada objek terikat pada peristiwa itu wujud, dan tentukan sama ada perlu untuk meneruskan pelaksanaan peristiwa terikat. Mengesan objek acara dilakukan dengan mengesan

Salin kod Kod adalah seperti berikut:

$(event.target).closest('.clickMe')

Bolehkah ia dicapai dengan mencari elemen padanan.

(6) Melalui ujian (5), jika objek terikat kepada peristiwa wujud, peristiwa terikat akan dilaksanakan.

Memandangkan kaedah langsung akan mengesan sama ada objek terikat pada peristiwa itu wujud hanya apabila peristiwa berlaku, kaedah langsung boleh melaksanakan elemen tambahan dan pengikatan peristiwa kemudiannya. Sebaliknya, ikatan akan menentukan sama ada unsur yang terikat dengan peristiwa itu wujud semasa fasa mengikat peristiwa itu dan hanya akan mengikat unsur semasa, bukan pada nod induk.

Mengikut analisis di atas, manfaat hidup adalah sangat hebat, jadi mengapa kita perlu menggunakan kaedah bind? Sebab mengapa jQuery mengekalkan kaedah bind dan bukannya menggunakan kaedah langsung untuk menggantikan bind adalah kerana live tidak dapat menggantikan bind sepenuhnya dalam beberapa kes. Perbezaan utama adalah seperti berikut:

(1) Kaedah bind boleh mengikat mana-mana acara JavaScript, manakala kaedah langsung hanya menyokong klik, dblclick, keydown, tekan kekunci, keyup, mousedown, mousemove, mouseout, mouseover dan mouseup dalam jQuery 1.3. 1, fokus dan acara biru juga disokong (dipetakan kepada fokus dan fokus, yang lebih sesuai dan boleh menggelembung). Selain itu, dalam jQuery 1.4.1, hover (dipetakan kepada "mouseenter mouseleave") juga disokong.

(2) live() tidak menyokong sepenuhnya elemen yang ditemui melalui traversal DOM. Sebaliknya, anda harus sentiasa menggunakan kaedah .live() terus selepas pemilih.

(3) Apabila elemen menggunakan kaedah langsung untuk mengikat peristiwa, jika anda ingin menghalang penghantaran atau menggelegak acara, anda mesti mengembalikan palsu dalam fungsi Hanya memanggil stopPropagation() tidak boleh menghalang penghantaran peristiwa menggelegak

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan acara dan kaedah jQuery boleh menyemak topik khas tapak ini: "Ringkasan penggunaan dan teknik acara biasa jQuery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.