jQuery mengalih keluar pendengar langsung

Apabila membangunkan aplikasi web, adalah perkara biasa untuk menggunakan penghantar acara tersuai dan menambah pendengar. jQuery ialah perpustakaan JavaScript yang sangat popular dengan sistem acara yang sangat berkuasa yang membolehkan pembangun menambah pendengar pada elemen DOM dan mengendalikan acara yang dicetuskan oleh elemen DOM. Menggunakan pendengar acara ini, kami boleh melakukan beberapa tindakan, seperti menghantar permintaan AJAX, menolak data ke pelayan, dsb.

Walau bagaimanapun, pembangun juga perlu tahu cara mengalih keluar pendengar dengan betul daripada elemen DOM. Artikel ini akan memperkenalkan cara memadam pendengar langsung menggunakan jQuery.

Sebelum jQuery 1.7, anda perlu menggunakan kaedah live() untuk menambah pendengar acara. Kod sampel adalah seperti berikut:

$('a').live('click', function() {
    console.log('clicked');
});

Blok kod ini menambah pendengar yang akan mencetak mesej dalam konsol apabila elemen diklik.

Sekarang andaikan bahawa pada satu ketika kita mahu mengalih keluar pendengar daripada elemen a. Apa yang perlu kita lakukan?

Dalam jQuery, apabila anda ingin memadamkan pendengar, anda boleh menggunakan kaedah unbind() dan menentukan jenis acara dan fungsi pengendali yang sepadan. Tetapi di sini, pendekatan ini tidak berfungsi. Sebabnya ialah pendengar yang ditambahkan oleh kaedah live() sebenarnya bukan pada elemen DOM itu sendiri, tetapi dilaksanakan di seluruh dokumen.

Jadi, jika anda cuba menggunakan kaedah unbind() untuk mengalih keluar pendengar acara langsung, ia tidak akan berfungsi dengan betul. Dalam erti kata lain, pendengar acara ini akan wujud sehingga halaman ditutup atau dimuat semula.

Untuk menyelesaikan masalah ini, pasukan jQuery telah membangunkan kaedah baru delegate(), yang boleh digunakan untuk menggantikan live(). Pendengar yang ditambahkan menggunakan kaedah delegate() boleh dialih keluar menggunakan kaedah off().

Berikut ialah kod baharu yang menulis semula contoh kod sebelumnya menggunakan kaedah delegate():

$(document).delegate('a', 'click', function() {
    console.log('clicked');
});

Di sini, kami menggunakan kaedah delegate() untuk menambah pendengar acara. Parameter pertama ialah pemilih, menentukan elemen yang akan dipantau, parameter kedua ialah jenis acara yang ditentukan, dan parameter ketiga ialah fungsi pengendalian acara.

Sekarang, jika anda ingin mengalih keluar pendengar acara ini pada satu ketika, anda boleh menggunakan kaedah off(), seperti yang ditunjukkan di bawah:

$(document).off('click', 'a', function() {
    console.log('clicked');
});

Dalam blok kod baharu ini, kami lulus( ) Kaedah untuk membersihkan pendengar. Parameter pertama ialah jenis acara, parameter kedua ialah pemilih, dan parameter ketiga ialah pengendali acara yang akan dialih keluar. Ambil perhatian bahawa pengendali acara mesti sepadan dengan tepat, kerana anda tidak boleh mengalih keluar pendengar tertentu sahaja yang dilampirkan oleh pemilih.

Acara klik itu sendiri pada elemen tidak akan ditukar di sini, tetapi pendengar acara akan dipadamkan pada keseluruhan halaman. Oleh itu, jika anda ingin menambah pendengar acara langsung baharu pada masa hadapan, anda hanya perlu menggunakan kaedah delegate() baharu untuk menambah pendengar tanpa perlu risau tentang kesan pendengar lama terhadap pendengar baharu.

Ringkasan

Dalam artikel ini, kami mempelajari cara memadamkan pendengar langsung dalam jQuery. Apabila anda menambah pendengar acara menggunakan jQuery, ia dilampirkan pada keseluruhan dokumen dan bukannya elemen DOM tertentu. Oleh itu, untuk mengalih keluar jenis pendengar ini, anda perlu menggunakan kaedah delegate() dan bukannya kaedah live() dan gunakan kaedah off() untuk mengalih keluar pendengar yang sepadan. Jika anda ingin menghalang jenis pendengar acara lain daripada dipadamkan, pastikan anda menggunakan sintaks yang betul untuk memastikan bahawa hanya pendengar tertentu yang anda mahu padamkan dipadamkan.

Atas ialah kandungan terperinci jQuery mengalih keluar pendengar langsung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!