Adakah fungsi on() JQuery akan mengikat acara berulang kali?

JQuery ialah perpustakaan JavaScript popular yang menyediakan operasi DOM yang mudah dan pengendalian acara dalam pembangunan bahagian hadapan dan merupakan salah satu alat yang sangat diperlukan dalam pembangunan web. Apabila menggunakan JQuery, kita sering menggunakan fungsi pengikatan peristiwa pada() Walau bagaimanapun, banyak pembangun sering menghadapi soalan: Adakah fungsi on() JQuery akan mengikat peristiwa berulang kali?

Pertama, mari kita lihat definisi dan penggunaan fungsi on():

$(selector).on(event, childSelector, data, function(){...})

Antaranya, pemilih ialah elemen yang terikat dengan acara dan acara jenis acara yang akan diikat childSelector ialah pemilih elemen anak yang mengisytiharkan delegasi acara, data ialah data yang dihantar kepada pengendali acara, dan fungsi ialah pengendali acara terikat. Prinsip kerja fungsi

on() ialah: apabila peristiwa dicetuskan, elemen yang dipadankan oleh pemilih akan diproses oleh pengendali peristiwa yang sepadan. Fungsi on() menambah pengendali acara pada senarai pendengar acara elemen yang dipilih.

Jadi, apakah yang berlaku apabila kita menggunakan fungsi on() beberapa kali untuk mengikat jenis acara yang sama?

Malah, setiap kali fungsi on() dipanggil, pengendali acara jenis acara ini akan ditambahkan pada senarai pendengar acara, walaupun pengendali acara yang sama telah diikat. Ini bermakna jika kita menggunakan kaedah on beberapa kali untuk mengikat acara yang sama, pengendali acara yang sama akan ditambahkan berulang kali pada senarai pendengar acara.

Sebagai contoh, kod berikut akan berulang kali mengikat acara klik:

$(selector).on('click', function(){...});
$(selector).on('click', function(){...});
$(selector).on('click', function(){...});

Dengan cara ini, setiap kali elemen diklik, JQuery akan melaksanakan pengendali acara tiga kali dalam susunan mereka terikat.

Walau bagaimanapun, jika kita mengikat pengendali acara menggunakan fungsi on(), kemudian nyahikat pengendali acara menggunakan fungsi off() sekali lagi, dan kemudian mengikat pengendali acara menggunakan fungsi on() sekali lagi , acara ini pengendali hanya akan ditambah sekali. Kerana, apabila menggunakan fungsi off() untuk menyahikat acara, JQuery akan mengalih keluar pengendali acara daripada senarai pendengar acara dan hanya akan menambahnya semula apabila fungsi on() digunakan semula.

Jadi, kita boleh mengelakkan masalah mengikat berulang kali peristiwa oleh fungsi on() dengan menggunakan fungsi off() untuk menyahikat acara.

$(selector).on('click', function(){
   // code here;
   $(selector).off('click');//解绑click事件
   $(selector).on('click', function(){
     // do something
   });
});

Dalam kod di atas, kami menggunakan fungsi off() dalam pengendali acara untuk menyahikat acara klik. Kemudian, acara klik baharu telah diikat semula dalam pengendali acara dan pengendali acara baharu telah ditambahkan.

Sudah tentu, selain menggunakan fungsi off() untuk menyahikat acara untuk mengelakkan fungsi on() berulang kali mengikat acara, kita juga boleh menghalang pengikatan berulang dengan menentukan sama ada acara itu sudah wujud dalam acara itu. senarai pendengar.

if(!$(selector).data('hasBind')){
  $(selector).data('hasBind', true).on('click', function(){
    // do something
  });
}

Dalam kod di atas, kami menggunakan kaedah data() untuk mewujudkan atribut hasBind pada elemen dan menetapkan nilai awalnya kepada false. Kemudian, dengan menilai nilai atribut hasBind, jika ia palsu, ikat peristiwa dan tetapkan nilai atribut hasBind kepada benar, supaya ia tidak akan diikat berulang kali pada masa hadapan.

Ringkasnya, kaedah on() JQuery akan berulang kali mengikat peristiwa, jadi kita perlu menggunakan fungsi off() untuk menyahikat acara atau mencegah pertindihan dengan menentukan sama ada acara itu sudah ada dalam senarai pendengar acara Mengikat . Ini dapat mengelakkan masalah pelaksanaan berulang dengan lebih baik apabila mengikat acara dan meningkatkan kecekapan pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Adakah fungsi on() JQuery akan mengikat acara berulang kali?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!