Pengenalan kepada empat cara untuk mengikat acara dengan jQuery

Bab ini akan memperkenalkan anda kepada empat cara mengikat acara dalam jQuery Ia mempunyai nilai rujukan tertentu. Saya harap ia akan membantu anda.

jQuery menyediakan empat kaedah pemantauan acara, iaitu bind, live, delegate, dan on. Mari berikan pengenalan terperinci kepada anda melalui artikel ini Rakan-rakan yang berminat harus melihat bersama-sama

jQuery menyediakan pelbagai cara untuk mengikat acara antara mereka, membantu kami membuat pilihan yang betul semasa menulis kod, untuk menulis kod yang elegan dan mudah diselenggara. Mari kita lihat cara untuk mengikat acara dalam jQuery.

jQuery menyediakan empat kaedah pemantauan acara, iaitu bind, live, delegate, dan on. Sebelum mula melihatnya

Satu: bind(type,[data],function(eventObject))

bind digunakan dengan lebih kerap Satu jenis, fungsinya adalah untuk mengikat fungsi mendengar jenis acara tertentu kepada elemen yang dipilih Maksud parameter adalah seperti berikut:

jenis: jenis acara, seperti klik, tukar, tetikus, dsb. .;

data: Parameter yang dihantar ke dalam fungsi mendengar diperoleh melalui peristiwa.data. Pilihan;

fungsi: fungsi mendengar, yang boleh lulus dalam objek acara Acara di sini ialah objek acara yang dirangkumkan oleh jQuery, yang berbeza daripada objek acara asli, anda perlu memberi perhatian kepada

kod sumber:

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
$('#myol li').bind('click',getHtml);

Ciri bind ialah ia akan mengikat pendengar kepada elemen sasaran, satu dengan satu Tiada masalah untuk menggunakannya apabila elemen pada halaman tidak akan ditambah secara dinamik. Tetapi jika "elemen senarai 5" ditambah secara dinamik pada senarai, tidak akan ada respons apabila mengklik padanya dan anda mesti mengikatnya semula. Untuk mengelakkan masalah ini, kita boleh menggunakan secara langsung.

jQuery juga mempunyai cara ringkas untuk mengikat peristiwa, seperti a.click(function(){});, a.change(function(){});, dsb. Fungsinya adalah sama seperti mengikat, tetapi Ia hanyalah singkatan.

2: langsung(taip, [data], fn)

Parameter live adalah sama dengan bind kod sumber dahulu :

live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}

Anda boleh melihat bahawa kaedah langsung tidak mengikat pendengar kepada dirinya sendiri (ini), tetapi dengan ini. Apakah konteks ini? Sebenarnya, ia adalah julat terhad elemen Ia akan jelas selepas membaca kod berikut:

$('#myol li').context; //document
$('#myol li','#myol').context; //document
$('#myol li',$('#myol')[0]); //ol

Biasanya, kami tidak akan menggunakan pemilih seperti kaedah ketiga dianggap bahawa konteks ini biasanya dokumen, iaitu kaedah langsung mengikat pendengar kepada dokumen. Tanpa mengikat pendengar terus kepada elemen, adakah anda masih ingat mekanisme delegasi acara Jika tidak, anda boleh klik di sini untuk mengingatinya. Langsung menggunakan mekanisme perwakilan acara untuk melengkapkan pemantauan dan pemprosesan acara, dan mewakilkan pemprosesan nod kepada dokumen. Dalam fungsi mendengar, kita boleh menggunakan event.currentTarget untuk mendapatkan nod yang sedang menangkap acara. Contoh berikut akan mendedahkan:

$('#myol li').live('click',getHtml);

3: Hidup mempunyai kekurangan yang sedemikian, jadi kami fikir, oleh kerana orang tua itu mempunyai beban yang begitu berat, bolehkah kita tidak mengikat pendengar kepada dokumen? Sebaliknya, bukankah lebih baik untuk mengikatnya dengan elemen induk terdekat? Mengikut logik biasa, perwakilan dilahirkan.

Parameter mempunyai pemilih tambahan, yang digunakan untuk menentukan elemen sasaran yang mencetuskan peristiwa Pendengar akan terikat pada elemen yang memanggil kaedah ini. Lihat kod sumber:

delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}

memanggil semula dan meneruskan pemilih kepada hidup. Nampaknya hidup ini sangat penting. Abaikan sahaja buat masa ini. Mari kita lihat contoh dahulu:

$('#myol').delegate('li','click',getHtml);

Selepas membaca begitu banyak, anda tidak sabar untuk melihat penampilan sebenar ini di sini:

on(type,[selector],[data],fn)

Parameter dan perwakilan Ia hampir sama tetapi masih terdapat perbezaan yang ketara Pertama, jenis dan pemilih telah menukar kedudukan mereka, dan kedua, pemilih telah menjadi pilihan. Sebab untuk menukar kedudukan adalah sukar untuk disahkan, tetapi ia sepatutnya untuk menjadikannya lebih selesa secara visual.

Mari kita lihat contoh tanpa melepasi pemilih:

$('#myol li').on('click',getHtml);

Anda boleh melihat peristiwa itu.currentTarget ialah li sendiri, yang mempunyai kesan yang sama seperti bind. Bagi menghantar pemilih, ia mempunyai maksud yang sama seperti perwakilan Kecuali untuk susunan parameter yang berbeza, semua yang lain adalah sama.

Akhirnya kita nampak peranan sebenar on. Jadi, dengan kaedah mengikat acara yang begitu banyak, bagaimana kita harus memilih?

Malah, tidak perlu risau tentang isu ini sama sekali, kerana anda sudah tahu perbezaan antara mereka, kan? Walau bagaimanapun, pengesyoran rasmi adalah untuk menggunakan pada sebanyak mungkin, kerana kaedah lain diselesaikan dengan memanggil secara dalaman Menggunakan pada secara langsung boleh meningkatkan kecekapan, dan anda boleh menggunakannya untuk menggantikan tiga kaedah penulisan yang lain. Mengenai cara untuk menggantikannya, saya rasa tidak perlu menuliskannya secara terus-terang Setelah benar-benar memahami perbezaan mereka, ia sememangnya tidak sukar.

Di atas ialah empat cara mengikat acara dalam jQuery yang diperkenalkan oleh editor saya harap ia akan membantu semua orang.