Penjelasan terperinci tentang contoh penggunaan kaedah on() dalam jQuery_jquery

Artikel ini menganalisis penggunaan kaedah jQuery on() dengan contoh. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

1. Penggunaan kaedah jQuery on():

pada(acara,[pemilih],[data],fn)

acara: Satu atau lebih jenis acara yang dipisahkan oleh ruang dan ruang nama pilihan, seperti "klik" atau "keydown.myPlugin".
pemilih: Rentetan pemilih untuk keturunan penapis bagi elemen pemilih yang mencetuskan acara. Jika pemilih adalah batal atau ditinggalkan, acara sentiasa dicetuskan apabila ia mencapai elemen yang dipilih.
data: Apabila peristiwa dicetuskan, event.data mesti dihantar ke fungsi pengendali acara.
fn: Fungsi yang dilaksanakan apabila peristiwa dicetuskan. Nilai palsu juga boleh digunakan sebagai singkatan untuk fungsi yang mengembalikan palsu.

2. Kelebihan kaedah jQuery on():

1. Menyediakan kaedah untuk pengikatan acara yang bersatu

2. Ia masih memberikan kelebihan .delegate() Sudah tentu, anda juga boleh menggunakan .bind() jika perlu

3 Perbandingan dengan .bind(), .live(), .delegate():

1. Sebenarnya, .bind(), .live(), .delegate() semuanya dilaksanakan melalui .on()

Salin kod Kod adalah seperti berikut:

bind: function( types, data, fn ) {
           kembalikan this.on( type, null, data, fn );
},
buka ikatan: fungsi( jenis, fn ) {
          kembalikan this.off( type, null, fn );
},

langsung: fungsi( jenis, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
         kembalikan ini;
},
Mati: fungsi( jenis, fn ) {
jQuery( this.context ).off( types, this.selector || "**", fn );
         kembalikan ini;
},

perwakilan: fungsi( pemilih, jenis, data, fn ) {
          kembalikan this.on( jenis, pemilih, data, fn );
},
​ nyahdelegasikan: fungsi(pemilih, jenis, fn) {
// ( ruang nama ) atau ( pemilih, jenis [, fn] )
           return arguments.length === 1 ? this.off( selector, "**") : this.off( types, selector || "**", fn );
}

2. Kos menggunakan .bind() adalah sangat tinggi. Ia akan menghubungkan pengendali acara yang sama kepada semua elemen DOM yang sepadan

3 Jangan gunakan .live() lagi, ia tidak lagi disyorkan dan mempunyai banyak masalah

4. .delegate() akan menyediakan cara yang baik untuk meningkatkan kecekapan dan kami boleh menambah kaedah pengendalian acara kepada elemen yang ditambah secara dinamik.

5. Kita boleh menggunakan .on() untuk menggantikan tiga kaedah di atas

4. Contoh penggunaan kaedah jQuery on()

1. Ikat peristiwa klik dan gunakan kaedah off() untuk mengalih keluar kaedah terikat pada on()

Salin kod Kod adalah seperti berikut:

$(document).ready(function(){
$("p").on("klik",fungsi(){
$(this).css("warna latar belakang","merah jambu");
});
$("butang").klik(fungsi(){
$("p").off("klik");
});
});

2. Berbilang acara terikat pada fungsi yang sama

Salin kod Kod adalah seperti berikut:

$(document).ready(function(){
$("p").on("mouseover mouseout",function(){
$("p").toggleClass("intro");
});
});

3. Mengikat berbilang acara kepada fungsi yang berbeza

Salin kod Kod adalah seperti berikut:

$(document).ready(function(){
$("p").on({
mouseover:function(){$("body").css("background-color","lightgrey");},
mouseout:function(){$("body").css("background-color","lightblue");},
Klik:function(){$("body").css("background-color","kuning");}
});
});

4. Benutzerdefinierte Ereignisse binden

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName "! Was für ein wunderschöner Name!").show();
});
$("button").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});

5. Daten an Funktion übergeben

Code kopieren Der Code lautet wie folgt:

Function handlerName(event)
{
alarm(event.data.msg);
}

$(document).ready(function(){
$("p").on("click", {msg: "You just clicked me!"}, handlerName)
});

6. Gilt für nicht erstellte Elemente

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){
$("div").on("click","p",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("

Dies ist ein neuer Absatz.

").insertAfter("button");
});
});

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.