Semua kegunaan jquery on

jQuery ialah perpustakaan JavaScript popular yang menyediakan pelbagai ciri untuk menjadikan pengaturcaraan JavaScript lebih mudah dan pantas. Antaranya, kaedah .on() dalam jQuery ialah kaedah yang sangat praktikal yang boleh membantu pembangun mencipta acara dinamik, mengikat pengendali acara dan menambah pendengar acara. Artikel ini akan memperkenalkan semua penggunaan kaedah .on(). Kaedah

1. Sintaks asas

.on() digunakan untuk menambah pengendali acara dan pendengar acara adalah seperti berikut:

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

di mana,

<.>

• : digunakan untuk memilih elemen untuk diikat pada acara, yang boleh menjadi pemilih CSS atau objek jQuery selector
• : menentukan jenis acara yang akan diikat, seperti; sebagai event, click, mousedown, dsb.; mousemove
• : parameter pilihan, digunakan untuk menapis elemen turunan untuk terikat kepada peristiwa; parameter pilihan, diluluskan dalam Parameter dalam pengendali acara; childSelector
• 2. Penggunaan kaedah data kaedah
• function mempunyai banyak kegunaan, yang akan diperkenalkan satu persatu di bawah.

1. Mendengar satu acara

.on()Contoh berikut akan menambah

pendengar acara kepada semua

elemen: .on()

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

Selain itu,

kaedah juga menyokong jenis acara lain, seperti

,

, button, dsb. click

2. Dengar berbilang acara Kaedah

.on()mousedown juga menyokong pengikatan berbilang acara Contoh berikut akan menambah mousemove dan keydown pada

. elemen. Pendengar acara:

$("button").on("click mousedown mouseup", function() {
  alert("你与按钮交互了！");
});

3 Nyatakan elemen turunan

.on()button kaedah juga menyokong penapisan elemen keturunan untuk terikat kepada peristiwa, contoh berikut adalah untuk semua elemen > Elemen menambah click pendengar acara: mousedown

$("ul").on("click", "li", function() {
  alert("你单击了列表项！");
});

mouseup 4. Cetuskan berbilang peristiwa sekaligus

Dengan menghantar berbilang jenis acara sebagai parameter kepada kaedah

, anda boleh mencetuskan ini acara sekaligus Tambah pendengar acara pada jenis acara, seperti contoh berikut:

$("button").on({
  mouseenter: function() {
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function() {
    $(this).css("background-color", "white");
  },
  click: function() {
    $(this).css("background-color", "yellow");
  }
});

.on()5 Menggunakan acara menggelegak ulli Dengan menggunakan acara menggelegak, anda boleh mengikat acara kepada elemen dinamik, yang. ialah, mengikat pengendali acara kepada elemen induk, apabila peristiwa dicetuskan pada elemen anak, peristiwa itu akan menggelembung daripada elemen anak kepada elemen induk dan mencetuskan pengendali acara. click

Contoh berikut akan menambah

pendengar acara kepada semua

elemen dan elemen anak mereka yang ditambah secara dinamik:

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

// 动态添加元素
$("button").append("新增按钮");

on()6 Data masuk

kadangkala memerlukan data tambahan untuk diserahkan kepada pengendali acara, yang boleh dicapai melalui parameter

kaedah

. Contoh berikut akan menghantar data tambahan kepada semua

elemen:

$("button").on("click", {
  name: "小明",
  age: 18
}, function(event) {
  alert("我的名字是 " + event.data.name + "，" + "我今年 " + event.data.age + "岁。");
});

button 3. Ringkasan Kaedah click

menyediakan fungsi yang kaya yang boleh membantu pembangun mencipta acara dinamik, pengikatan Tentukan pengendali acara dan menambah pendengar acara. Artikel ini memperkenalkan semua penggunaan kaedah

, termasuk:

.on()data untuk mendengar satu acara button

untuk mendengar berbilang acara; elemen turunan;

Cetuskan berbilang peristiwa sekaligus;

.on().on() Mahir menggunakan kaedah

boleh meningkatkan kecekapan pengaturcaraan JavaScript.

Atas ialah kandungan terperinci Semua kegunaan jquery on. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!