Bagaimana untuk mendengar dan mengalih keluar acara dengan jQuery

jQuery ialah perpustakaan JavaScript yang sangat popular yang menjadikan pembangunan JavaScript lebih mudah dan pantas. Dalam jQuery, acara adalah bahagian yang sangat penting. Pengendali acara jQuery membenarkan pembangun bertindak balas kepada interaksi pengguna dengan menambahkan beberapa fungsi. Selain menambah pendengar acara, anda juga boleh mengalih keluar pendengar acara. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mendengar dan mengalih keluar acara.

1. Pendengar acara jQuery

Pendengar acara jQuery ialah cara untuk memantau acara pada elemen DOM. Acara boleh menjadi acara tetikus, seperti klik tetikus, pergerakan tetikus, dsb., atau acara papan kekunci, seperti acara utama, dsb.

Mendengar acara elemen adalah sangat mudah, hanya gunakan kaedah .on() jQuery. Sebagai contoh, jika anda ingin mendengar peristiwa klik butang, anda boleh menggunakan kod berikut:

$("#myButton").on("click", function() {
  alert("Button clicked");
});

Di sini, kami telah memilih butang dengan id "myButton" dan menambah butang menggunakan kaedah .on() Klik pendengar acara. Apabila pengguna mengklik butang, fungsi alert() akan muncul kotak mesej.

Anda juga boleh menggunakan kaedah .on() untuk menambah pendengar acara untuk berbilang acara. Contohnya, jika anda ingin menambah pendengar acara akhbar dan lepaskan untuk butang, anda boleh menggunakan kod berikut:

$("#myButton").on({
    mousedown: function() {
        console.log("Button pressed");
    },
    mouseup: function() {
        console.log("Button released");
    }
});

Di sini kami telah menambah dua pendengar acara untuk butang, satu untuk tekan tetikus , dan satu lagi untuk pelepasan tetikus. Apabila pengguna menekan atau melepaskan butang, konsol akan mengeluarkan mesej yang sepadan.

2. Pengalih Keluar Acara jQuery

Apabila anda tidak lagi memerlukan pendengar acara, anda boleh menggunakan kaedah .off() untuk mengalih keluarnya daripada elemen. Kaedah .off() menerima parameter yang menentukan jenis acara untuk dialih keluar. Contohnya, untuk mengalih keluar pendengar acara klik dalam contoh di atas, gunakan kod berikut:

$("#myButton").off("click");

Di sini, kami telah mengalih keluar pendengar acara klik daripada butang menggunakan kaedah .off().

Anda juga boleh menggunakan kaedah .off() untuk mengalih keluar semua pendengar untuk acara tertentu. Contohnya, jika anda ingin mengalih keluar semua pendengar acara tetikus daripada butang, gunakan kod berikut:

$("#myButton").off("mousedown mouseup");

Di sini kami telah mengalih keluar semua pendengar acara tetikus daripada butang menggunakan kaedah .off() .

Jika anda ingin mengalih keluar semua pendengar acara pada elemen, gunakan kod berikut:

$("#myButton").off();

Di sini kami telah mengalih keluar semua pendengar acara pada butang menggunakan kaedah .off() .

3. Gunakan ruang nama untuk mendengar dan mengalih keluar acara

Ruang nama ialah ciri yang membolehkan anda mengumpulkan jenis acara. Ruang nama membantu anda menyusun dan mengurus kod anda dengan lebih baik. Sebagai contoh, jika anda ingin menambah dua pendengar acara klik pada butang, satu untuk memaparkan mesej dan satu lagi untuk menghantar data, anda boleh menggunakan kod berikut:

$("#myButton").on("click.displayMessage", function() {
  alert("Button clicked");
});

$("#myButton").on("click.sendData", function() {
  $.ajax("sendData.php");
});

Di sini, kami mempunyai Dua klik pendengar acara ditambah, satu menggunakan ruang nama .displayMessage dan satu lagi menggunakan ruang nama .sendData. Apabila butang diklik, jQuery akan memanggil dua pendengar acara.

Jika anda ingin mengalih keluar pendengar acara tertentu, sila nyatakan ruang nama tertentu dalam kaedah .off(). Contohnya, untuk mengalih keluar pendengar acara bagi mesej paparan daripada contoh kod di atas, gunakan kod berikut:

$("#myButton").off("click.displayMessage");

Di sini, kami menggunakan kaedah .off() untuk mengalih keluar hanya pendengar acara menggunakan Ruang nama .displayMessage Klik pendengar acara. Jika anda ingin mengalih keluar pendengar acara menggunakan ruang nama .sendData, gunakan kod berikut:

$("#myButton").off("click.sendData");

Di sini, kami telah mengalih keluar hanya pendengar acara klik menggunakan ruang nama .sendData menggunakan peranti kaedah .off().

4. Kesimpulan

Dalam artikel ini, kami memperkenalkan cara mendengar dan mengalih keluar acara menggunakan jQuery. Kaedah .on() jQuery membolehkan anda menambah satu atau lebih pendengar acara pada elemen. Sebaik sahaja anda tidak lagi memerlukan pendengar, alih keluarnya daripada elemen menggunakan kaedah .off(). Anda juga boleh menggunakan ruang nama untuk mengumpulkan jenis acara dan pendengar acara tertentu boleh dialih keluar menggunakan kaedah .off(). Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci Bagaimana untuk mendengar dan mengalih keluar acara dengan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!