Apakah fungsi acara mengikat jquery

Fungsi peristiwa mengikat jquery: Mengikat peristiwa biasa ke nod DOM Apabila nod DOM dipilih, mengikat peristiwa itu untuk memudahkan pengguna menyediakan operasi yang sepadan. jQuery menyediakan empat kaedah mengikat peristiwa, iaitu mengikat, hidup, mewakilkan dan hidup, dan fungsi nyah dengar yang sepadan ialah nyahikat, mati, nyahdelegasikan dan dimatikan.

Persekitaran pengendalian tutorial ini: sistem windows7, versi jquery3.6, komputer Dell G3.

Apakah itu acara?

Respon halaman kepada pelawat yang berbeza dipanggil acara.

Pengendali acara merujuk kepada kaedah yang dipanggil apabila peristiwa tertentu berlaku dalam HTML.

Contoh:

• Gerakkan tetikus pada elemen.

• Pilih butang radio

• Elemen klik

Istilah "pencetus" sering digunakan dalam peristiwa "(atau "api") Contohnya: "Acara penekan kekunci menyala apabila anda menekan kekunci."

jquery event binding

Biasanya, kita perlu mengendalikan acara yang berkaitan dengan nod tertentu, seperti butang yang diklik Sesuatu seperti itu. Tetapi ada masalah di sini Jika kita boleh mendapatkan nod tertentu, sudah tentu tiada apa yang boleh dikatakan. Tetapi kadangkala, nod yang ingin kami proses belum wujud lagi, tetapi kami perlu mentakrifkan pemprosesan acaranya. Sebagai contoh, kami mengatakan bahawa dalam UL, apabila setiap LI diklik, fungsi mesti dilaksanakan. Walau bagaimanapun, kandungan itu sendiri dalam UL mungkin berubah pada mulanya ia hanya mempunyai dua LI, dan kemudian ia menjadi tiga LI tambahan juga mesti boleh bertindak balas kepada peristiwa.

Situasi di atas adalah keperluan biasa. Kita boleh menggunakan mekanisme menggelegak acara untuk mencapai matlamat kita. Kami mengikat pemprosesan acara kepada UL, supaya apabila LI diklik, ia akan menggelembung ke UL unggul Dengan cara ini, apabila memproses acara, kami boleh menentukan nod acara itu untuk langkah seterusnya.

Ikatan peristiwa ialah peristiwa untuk elemen dom Ia terikat pada elemen dom dan boleh memantau acara yang sama beberapa kali pada elemen. Fungsi: Ikat peristiwa biasa pada nod DOM Apabila nod DOM dipilih, ikat peristiwa itu kepadanya untuk memudahkan pengguna menyediakan operasi yang sepadan.

jQuery menyediakan empat kaedah pengikatan peristiwa, iaitu mengikat, hidup, mewakilkan, hidup, dan fungsi nyah dengar yang sepadan ialah menyahikat, mati, menyahwakil dan mematikan.

Perbezaan antara kaedah ini:

1 Fungsi bind() hanya boleh menetapkan acara untuk elemen sedia ada tetapi live(), Kedua-duanya pada() dan perwakilan () tetapan acara sokongan untuk elemen yang baru ditambah pada masa hadapan; ), fungsi gantian dihidupkan(), yang juga merupakan fungsi yang baru ditambah dalam versi 1.7 Begitu juga, ia boleh digunakan untuk menggantikan fungsi live() telah dipadamkan dalam versi 1.9>

Bind ialah jenis yang lebih kerap digunakan dan fungsinya. adalah untuk mengikat elemen yang dipilih Tentukan fungsi mendengar untuk jenis acara tertentu Maksud parameter adalah seperti berikut:

jenis: jenis acara, seperti klik, tukar, tetikus, dll.; data: parameter yang dihantar ke fungsi mendengar, melalui data peristiwa diperoleh. Pilihan; fungsi

Ciri bind ialah ia akan mengikat pendengar kepada elemen sasaran, satu dengan satu Tiada masalah untuk menggunakannya apabila elemen dihidupkan 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, hanya Ia hanyalah singkatan.

  bind: function( types, data, fn ) {

  return this.on( types, null, data, fn );

  }

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

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

通常情况下，我们都不会像第三种方式那样使用选择器，所以也就认为这个context通常就是document了，即live方法把监听器绑定到了 document上了。不把监听器直接绑定在元素上，你是不是想起事件委托机制来了呢?若没有，可以点击这里回忆一下。live正是利用了事件委托机制来 完成事件的监听处理，把节点的处理委托给了document。在监听函数中，我们可以用event.currentTarget来获取到当前捕捉到事件的 节点。下面的例子来揭晓：

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

3、delegate和on

live存在那样的缺点，所以我们就思考，既然老爷子负担那么重，可不可以别把监听器绑定在document上呢，绑定在就近的父级元素上不就好了。顺应正常逻辑，delegate诞生了。

参数多了一个selector，用来指定触发事件的目标元素，监听器将被绑定在调用此方法的元素上。看看源码：

delegate: function( selector, types, data, fn ) {

return this.on( types, selector, data, fn );

}

又是调用了on，并且把selector传给了on。看来这个on真的是举足轻重的东西。照样先不管它。看看示例先：

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

看了这么多，你是不是迫不及待想看看这个on的真实面目了呢，这就来：

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

参数与delegate差不多但还是有细微的差别，首先type与selector换位置了，其次selector变为了可选项。交换位置的原因不好查证，应该是为了让视觉上更舒服一些吧。

我们先不传selector来看一个例子：

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

可以看到event.currentTarget是li自己，与bind的效果一样。至于传selector进去，就是跟delegate一样的意义了，除了参数顺序不同，其他完全一样。