Rumah > Artikel > hujung hadapan web > jquery pada pengikatan acara buang
jquery pada pengikatan acara buang
- PHPzasal
- 2023-05-28 17:38:38653semak imbas
Dalam pembangunan bahagian hadapan, untuk mencapai pelbagai kesan interaktif, kami akan mengikat acara pada elemen halaman supaya mereka boleh melakukan operasi khusus dalam senario tertentu. Walau bagaimanapun, kadangkala kita perlu mengalih keluar pengikatan peristiwa Contohnya, apabila elemen dimusnahkan atau tidak perlu lagi mendengar acara, kita perlu menyahikat pengendali acara yang sepadan daripada elemen. Dalam jQuery, berbilang kaedah disediakan untuk mengikat dan menyahikat peristiwa, seperti on(), off(), unbind(), dsb. Artikel ini terutamanya akan memperkenalkan cara mengalih keluar pengikatan peristiwa dalam kaedah on().
Pengendalian peristiwa jQuery
Dalam jQuery, secara amnya terdapat tiga kaedah pengendalian peristiwa, iaitu bind(), delegate() dan live(). Antaranya, delegate() kurang digunakan, dan fungsi utamanya ialah menambah pengendali acara untuk elemen induk untuk elemen anak yang ditambah secara dinamik live() telah ditinggalkan selepas versi jQuery 1.7, dan boleh digantikan dengan on().
on() ialah kaedah pengendalian acara yang biasa digunakan dalam jQuery, yang digunakan untuk mengikat satu atau lebih fungsi pengendalian acara kepada elemen tertentu. Kaedah penggunaan biasa adalah seperti berikut:
$(selector).on(event, handler);
Antaranya, selector ialah elemen sasaran yang perlu terikat pada acara, yang boleh menjadi pemilih seperti label, nama kelas, ID, dll.; event ialah jenis acara terikat, seperti klik, alih tetikus, kekunci, dll.; handler ialah fungsi pemprosesan acara, yang boleh menjadi fungsi tanpa nama atau nama fungsi yang ditentukan.
Memandangkan keperluan projek dan skala kod terus berkembang, elemen mungkin terikat pada acara yang sama oleh berbilang fungsi panggil balik Pada masa ini, kita perlu mengalih keluar acara tertentu yang terikat pada elemen tersebut semua pengendali acara. Seterusnya, kami akan memperkenalkan cara menggunakan parameter dalam on() untuk mengalih keluar pengikatan acara.
Alih keluar pengendali yang ditentukan
Jika kita hanya perlu mengalih keluar pengendali peristiwa yang ditentukan pada elemen, kita boleh menggunakan kaedah off(). Kaedah ini digunakan untuk mengalih keluar fungsi pengendali acara yang berkaitan dengan elemen yang ditentukan. Kaedah penggunaan biasa adalah seperti berikut:
$(selector).off(event, handler);
Antaranya, selector ialah elemen sasaran acara yang perlu dialih keluar, yang boleh menjadi pemilih seperti label, nama kelas, ID, dll.; event ialah jenis acara yang perlu dialih keluar seperti klik, tetikus, kekunci, dsb. handler ialah fungsi pengendalian acara yang dialih keluar, yang boleh menjadi fungsi tanpa nama atau nama fungsi yang ditetapkan.
Seterusnya, kami menggunakan contoh khusus untuk menunjukkan menggunakan kaedah off() untuk mengalih keluar pengikatan peristiwa.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移除指定事件处理程序</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="btn">点击绑定事件</button>
<script>
function handleClick() {
console.log('处理click事件');
}
$('#btn').on('click', handleClick);
setTimeout(() => {
$('#btn').off('click', handleClick);
console.log('移除click事件处理程序');
}, 2000);
</script>
</body>
</html>Dalam kod di atas, kami mengikat acara click pada elemen butang dan pengendali acara terikat ialah handleClick. Kemudian, selepas 2 saat, kami mengalih keluar pengendali acara klik off() menggunakan kaedah handleClick. Apabila kami mengklik butang, maklumat yang mengendalikan acara akan dicetak pada konsol. Selepas mengalih keluar pengendali, tiada apa yang berlaku apabila butang diklik sekali lagi. Ini ialah operasi asas untuk mengalih keluar pengendali acara yang ditentukan melalui kaedah off().
Alih keluar semua pengendali yang berkaitan dengan elemen
Semasa pembangunan, kita juga mungkin perlu mengalih keluar semua pengendali acara yang terikat pada elemen. Dalam kes ini, kita boleh menggunakan off() Bentuk lain kaedah:
$(selector).off(event);
Kaedah ini hanya perlu lulus dalam satu parameter event, yang akan mengalih keluar semua pengendali acara jenis yang ditentukan daripada elemen.
Gunakan one()
Selain off(), terdapat satu lagi kaedah dalam jQuery yang boleh digunakan untuk mengalih keluar pengikatan peristiwa, iaitu one(). Kaedah ini sangat serupa dengan on(), tetapi ia hanya akan mendengar acara sekali dan secara automatik menyahikat selepas pelaksanaan. Jadi, jika anda perlu menambah pengendali acara pada elemen yang hanya perlu dilaksanakan sekali, anda boleh menggunakan one() dan bukannya on() untuk mengikat acara supaya anda tidak perlu menyahikatnya secara manual.
$(selector).one(event, handler);
adalah sama dengan kaedah on() one() juga menerima dua parameter, menyatakan jenis acara dan pengendali yang akan diikat. Apabila jenis acara yang ditentukan dicetuskan, pengendali dilaksanakan. Apabila pengendali menyelesaikan pelaksanaan, acara yang sepadan akan dialih keluar secara automatik.
Menggunakan kaedah unbind()
unbind() juga boleh digunakan untuk mengalih keluar pengikatan peristiwa. Sama seperti off(), unbind() juga mempunyai dua kegunaan, iaitu mengalih keluar pengendali acara yang ditentukan dan mengalih keluar semua jenis pengendali acara. Penggunaannya adalah seperti berikut:
$(selector).unbind(event, handler); // 移除指定事件处理程序 $(selector).unbind(event); // 移除全部事件处理程序
Ringkasan
Artikel ini terutamanya memperkenalkan penggunaan on(), off(), one() dan unbind() kaedah dalam jQuery untuk mengendalikan pengikatan dan operasi mengikat peristiwa. Untuk keperluan yang berbeza, anda boleh memilih kaedah yang sesuai untuk mengendalikan pengikatan acara, menjadikan kod lebih fleksibel dan cekap. Perlu diingat bahawa apabila tidak mengikat, anda mesti memberi perhatian kepada lulus parameter yang betul, jika tidak, situasi yang tidak dijangka mungkin berlaku.
Atas ialah kandungan terperinci jquery pada pengikatan acara buang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!