pengikatan dan pelepasan acara jquery

jQuery ialah perpustakaan JavaScript yang sangat popular dengan API yang mudah dan fungsi yang berkuasa, dan digunakan secara meluas dalam pembangunan bahagian hadapan Web. Apabila menggunakan jQuery untuk membangunkan halaman hadapan, anda selalunya perlu mengikat dan menyahikat acara kepada elemen. Artikel ini akan memperkenalkan secara terperinci cara menggunakan jQuery untuk mengikat dan tidak mengikat acara, dan menyelesaikan masalah biasa dan penyelesaiannya.

1. Pengikatan peristiwa

1 Pengikatan satu acara

JQuery boleh mengikat fungsi tindak balas acara elemen dengan mudah. Seperti yang ditunjukkan di bawah:

$(element).on(event, handler);

Antaranya, elemen ialah elemen yang terikat dengan peristiwa, peristiwa ialah jenis peristiwa terikat, dan pengendali ialah fungsi tindak balas acara.

Sebagai contoh, jika anda ingin menambahkan acara klik pada elemen butang, anda boleh menulis:

$("button").on("click", function(){
    // 事件响应函数
});

2 acara pada elemen Acara, anda boleh menambah berbilang jenis acara dalam kaedah on. Contohnya:

$(element).on(event1, event2, handler);

Sebagai contoh, jika anda ingin mengikat peristiwa klik dan tetikus pada elemen butang pada masa yang sama, anda boleh menulis seperti ini:

$("button").on("click mouseover", function(){
    // 事件响应函数
});

3 perwakilan

Apabila Apabila acara perlu diwakilkan kepada elemen lain, anda boleh menggunakan fungsi perwakilan acara kaedah on. Hanya tentukan elemen pengikat sebagai pemilih. Contohnya:

$(parentElement).on(event, childSelector, handler);

Antaranya, parentElement ialah elemen induk yang terikat dengan acara tersebut, childSelector ialah pemilih elemen anak yang akan diwakilkan dan pengendali ialah fungsi tindak balas acara.

Sebagai contoh, jika anda ingin mengikat wakil acara klik kepada elemen anak kepada elemen induk, anda boleh menulis seperti ini:

$("#parent").on("click", "#child", function(){
    // 事件响应函数
});

2 Dalam pembangunan halaman, selalunya Peristiwa sedia ada perlu dikeluarkan untuk memastikan kod tidak akan dilaksanakan berulang kali atau masalah akan berlaku. jQuery menyediakan tiga kaedah pelepasan peristiwa, iaitu kaedah off, unbind dan die.

Kaedah 1.off

Kaedah off digunakan terutamanya untuk menyahsekat acara yang terikat dengan kaedah on.

Berikut ialah format asas kaedah off:

$(element).off(event, handler);

Antaranya, elemen ialah elemen acara yang akan dikeluarkan, acara ialah jenis acara yang akan dikeluarkan, dan pengendali ialah fungsi tindak balas acara yang akan dikeluarkan.

Sebagai contoh, dengan mengandaikan bahawa acara klik telah terikat pada elemen butang sebelum ini, dan kini anda perlu membatalkan acara tersebut, anda boleh menulis seperti ini:

$("button").off("click");

2. kaedah unbind

kaedah melepaskan ikatan Ia juga boleh digunakan untuk menyahikat peristiwa, tetapi ia boleh menyahikat peristiwa melalui semua kaedah.

Berikut ialah format asas kaedah unbind:

$(element).unbind(event, handler);

Antaranya, elemen ialah elemen acara yang akan dikeluarkan, acara ialah jenis acara yang akan dikeluarkan, dan pengendali ialah fungsi tindak balas acara yang akan dikeluarkan.

Sebagai contoh, peristiwa klik sebelum ini terikat pada elemen butang dan acara tetikus terikat pada elemen butang Sekarang anda perlu membatalkan kedua-dua acara anda boleh menulis seperti ini:

$("button").unbind();

kaedah 3.die

kaedah mati boleh menyahikat acara melalui delegasi acara.

Berikut ialah format asas kaedah die:

$(parentElement).die(event, childSelector, handler);

Antaranya, parentElement ialah elemen induk yang akan dikeluarkan, childSelector ialah pemilih elemen anak yang akan diwakilkan, dan pengendali ialah fungsi tindak balas acara untuk dikeluarkan.

Sebagai contoh, jika acara klik mewakilkan kepada elemen anak sebelum ini terikat pada elemen induk, dan kini acara itu perlu dikeluarkan, anda boleh menulis seperti ini:

$("#parent").die("click", "#child");

3. Masalah biasa dan penyelesaiannya

1. Bagaimana untuk mengelakkan pengikatan berulang?

Situasi 1: Jika terdapat berbilang peristiwa yang terikat pada elemen yang sama, anda boleh menggunakan satu kaedah jquery, yang hanya akan melaksanakan fungsi tindak balas acara sekali.

Contohnya:

$("button").one("click", function(){
    // 事件响应函数
});

Kes 2: Jika sesuatu acara perlu diikat beberapa kali, anda boleh menggunakan kaedah mati untuk menyahikat acara itu dahulu.

Contohnya:

function clickHandler(){
    // 事件响应函数
}
$("button").off("click", clickHandler).on("click", clickHandler);

Kes 3: Gunakan kaedah nyahikat untuk menyahikat acara sebelum mengikat acara, dan kemudian mengikat semula acara.

Contohnya:

$("button").unbind("click").on("click", function(){
    // 事件响应函数
});

2.

Anda boleh menggunakan kaedah nyahpadam atau matikan, kedua-duanya boleh melepaskan perwakilan acara.

Contohnya:

$("#parent").undelegate("#child", "click");
$("#parent").off("click", "#child");

3. Bagaimana hendak membatalkan fungsi respons acara tanpa nama?

Anda boleh menggunakan kaedah mati untuk menentukan fungsi tindak balas acara sebagai pembolehubah untuk menyahikat acara.

Contohnya:

var clickHandler = function(){
    // 事件响应函数
}
$("button").on("click", clickHandler);
$("button").off("click", clickHandler);

Artikel ini memperkenalkan kaedah mengikat dan menyahsekat acara jQuery serta masalah biasa dan penyelesaiannya Cara menggunakan jQuery untuk mengikat dan menyahsekat acara adalah kemahiran yang diperlukan di hadapan-. akhir pembangunan satu. Saya berharap melalui kajian artikel ini, saya boleh memperoleh pemahaman yang lebih mendalam tentang pengikatan dan penyatuan acara jQuery, dengan itu meningkatkan kecekapan pembangunan bahagian hadapan Web.

Atas ialah kandungan terperinci pengikatan dan pelepasan acara jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!