Contoh kaedah jQuery on() dan kelebihan jquery on() method_jquery

Kaedah jQuery on() ialah kaedah yang disyorkan secara rasmi untuk acara mengikat.

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

Beberapa kaedah biasa sebelum ini dikembangkan daripada ini termasuk.

ikat()

　$("p").bind("click",function(){
　　　　alert("The paragraph was clicked.");
　　});
　　$("p").on("click",function(){
　　　　alert("The paragraph was clicked.");
　　});

wakilkan()

$("#div1").on("click","p",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("#div2").delegate("p","click",function(){
　　　　$(this).css("background-color","pink");
　　});

langsung()

　　$("#div1").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("#div2").live("click",function(){
　　　　$(this).css("background-color","pink");
　　});

Tiga kaedah di atas tidak disyorkan selepas jQuery1.8 Secara rasmi, dalam 1.9, telah membatalkan penggunaan kaedah live(), jadi. adalah disyorkan Semua menggunakan kaedah on().

petua: Jika anda perlu mengalih keluar kaedah terikat pada on(), anda boleh menggunakan kaedah off().

$(document).ready(function(){
　　$("p").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("button").click(function(){
　　　　$("p").off("click");
　　});
});

petua: Jika acara anda hanya memerlukan satu operasi, anda boleh menggunakan kaedah one()

$(document).ready(function(){
　　$("p").one("click",function(){
　　　　$(this).animate({fontSize:"+=6px"});
　　});
});

cetus() mengikat

$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function(){
　　$("input").select(function(){
　　　　$("input").after(" Text marked!");
　　});
　　$("button").click(function(){
　　　　$("input").trigger("select");
　　});
});

Berbilang acara terikat pada fungsi yang sama

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

Berbilang acara terikat kepada fungsi yang berbeza

$(document).ready(function(){
 $("p").on({
  mouseover:function(){$("body").css("background-color","lightgray");}, 
  mouseout:function(){$("body").css("background-color","lightblue");}, 
  click:function(){$("body").css("background-color","yellow");} 
 });
});

Ikatan acara tersuai

$(document).ready(function(){
 $("p").on("myOwnEvent", function(event, showName){
  $(this).text(showName + "! What a beautiful name!").show();
 });
 $("button").click(function(){
  $("p").trigger("myOwnEvent",["Anja"]);
 });
});

Haruskan data untuk berfungsi

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

Berlaku pada elemen yang belum dicipta

$(document).ready(function(){
 $("div").on("click","p",function(){
  $(this).slideToggle();
 });
 $("button").click(function(){
  $("<p>This is a new paragraph.</p>").insertAfter("button");
 });
});

Terdapat beberapa cara untuk mengikat peristiwa dalam jQuery Adalah disyorkan untuk menggunakan kaedah .on() untuk mengikat atas dua sebab:

Kaedah 1.on() boleh mengikat acara yang ditambahkan secara dinamik pada elemen halaman

Sebagai contoh, untuk elemen DOM yang ditambah secara dinamik pada halaman, peristiwa yang terikat dengan kaedah .on() tidak perlu mengambil berat tentang apabila elemen yang mendaftarkan acara itu ditambahkan, dan ia juga tidak perlu diikat berulang kali . Sesetengah pelajar mungkin terbiasa menggunakan .bind(), .live() atau .delegate() Jika anda melihat pada kod sumber, anda akan mendapati bahawa mereka sebenarnya memanggil kaedah .on() dan .live() kaedah dalam jQuery1 Versi 9 telah dialih keluar.

bind:
function(
 types, data, fn ) {
  return this.on(
 types, null,
 data, fn );
},
live:
function(
 types, data, fn ) {
  jQuery(
this.context
 ).on( types, this.selector,
 data, fn );
  return this;
},
delegate:
function(
 selector, types, data, fn ) {
  return this.on(
 types, selector, data, fn );
}

Untuk mengalih keluar acara yang terikat dengan .on(), gunakan kaedah .off().

2. Acara pengikatan kaedah On() boleh meningkatkan kecekapan

Banyak artikel yang disebut menggunakan acara menggelegak dan proksi untuk meningkatkan kecekapan pengikatan acara, tetapi kebanyakannya tidak menyenaraikan perbezaan khusus, jadi untuk mengesahkan, saya melakukan ujian kecil.

Anggapkan bahawa 5,000 li ditambahkan pada halaman dan gunakan Profil Alat Pembangun Chrome untuk menguji masa pemuatan halaman.

Pengikatan biasa (sebut saja)

$('li').click(function(){
  console.log(this)
});

Masa pelaksanaan proses pengikatan

2013-08-13_190358

Pengikatan biasa adalah bersamaan dengan mendaftarkan acara klik secara berasingan pada 5000li Penggunaan memori adalah kira-kira 4.2M dan masa pengikatan adalah kira-kira 72ms.

.on() mengikat

$(document).on('click',
'li',
function(){
  console.log(this)
})

Masa pelaksanaan proses pengikatan

2013-08-13_191010

.on() binding menggunakan proksi acara dan hanya mendaftarkan acara klik pada dokumen Penggunaan memori adalah kira-kira 2.2M dan masa mengikat adalah kira-kira 1ms.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang untuk mempelajari kaedah jquery on().