Pengenalan ringkas kepada pengikatan acara jQuery

Pengenalan kepada kaedah mengikat acara jQuery

jQuery ialah perpustakaan JavaScript yang sangat popular yang memudahkan operasi halaman dan pengendalian acara. Dalam jQuery, pengikatan peristiwa ialah operasi yang sangat biasa, dan tindakan yang sepadan boleh dicetuskan melalui kaedah pengikatan peristiwa. Artikel ini akan memperkenalkan beberapa kaedah mengikat acara jQuery yang biasa digunakan, dan melampirkan contoh kod tertentu.

1. kaedah .on()

.on() ialah salah satu kaedah pengikatan peristiwa yang paling biasa digunakan dalam jQuery. Ia boleh mengikat satu atau lebih peristiwa kepada satu atau lebih elemen. Sintaksnya adalah seperti berikut:

$(selector).on(event, function);

Antaranya, pemilih mewakili elemen yang akan diikat pada acara, acara mewakili jenis acara yang akan diikat (seperti klik, tetikus, dll.), dan fungsi mewakili fungsi yang akan dilaksanakan apabila peristiwa itu dicetuskan.

Kod sampel adalah seperti berikut:

$("button").on("click", function(){
  alert("按钮被点击了！");
});

2. kaedah .click()

.click() ialah versi ringkas kaedah .on(), digunakan untuk mengikat peristiwa klik pada elemen. Sintaksnya adalah seperti berikut:

$(selector).click(function);

Kod sampel adalah seperti berikut:

$("button").click(function(){
  alert("按钮被点击了！");
});

3 kaedah

.bind() Ia telah ditinggalkan dalam jQuery 3.0 disyorkan untuk menggunakan kaedah .on() sebaliknya . Sintaksnya adalah seperti berikut:

$(selector).bind(event, function);

Kod sampel adalah seperti berikut:

$("button").bind("click", function(){
  alert("按钮被点击了！");
});

4 kaedah .delegate()

.delegate() digunakan untuk perwakilan acara, yang boleh mengikat acara kepada elemen yang ditambah secara dinamik. Sintaksnya adalah seperti berikut:

$(ancestorSelector).delegate(descendantSelector, event, function);

Antaranya, ancestorSelector mewakili elemen ancestor, descendantSelector mewakili elemen descendant, event mewakili jenis acara yang akan diikat, dan fungsi mewakili fungsi yang akan dilaksanakan apabila acara tersebut dicetuskan.

Kod sampel adalah seperti berikut:

$("ul").delegate("li", "click", function(){
  alert("列表项被点击了！");
});

5 kaedah .live()

.live() juga digunakan untuk delegasi acara, tetapi ia telah ditamatkan dalam jQuery 1.7. ) kaedah sebaliknya. Sintaksnya adalah seperti berikut:

$(selector).live(event, function);

Kod sampel adalah seperti berikut:

$("button").live("click", function(){
  alert("按钮被点击了！");
});

Melalui pengenalan artikel ini, pembaca boleh mempelajari tentang beberapa kaedah pengikatan acara jQuery yang biasa digunakan dan bermula dengan cepat melalui contoh kod. Dalam pembangunan sebenar, memilih kaedah mengikat peristiwa yang sesuai mengikut senario dan keperluan tertentu bukan sahaja meningkatkan kecekapan kod, tetapi juga meningkatkan pengalaman pengguna. Saya harap pembaca akan dapat menggunakan jQuery dengan mudah dan menulis kod interaktif bahagian hadapan yang lebih lancar.

Atas ialah kandungan terperinci Pengenalan ringkas kepada pengikatan acara jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!