Apakah kelebihan kaedah on dalam jquery

Kelebihan kaedah on dalam jquery: 1. Kaedah on() boleh mengikat peristiwa yang ditambahkan secara dinamik pada elemen halaman, dan pengendali acara yang ditambahkan boleh digunakan pada elemen semasa dan masa hadapan Menambah; satu atau lebih pengendali acara kepada elemen sekali gus boleh meningkatkan kecekapan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 3.6.1, komputer Dell G3. Kaedah

on() menambah satu atau lebih pengendali acara pada elemen yang dipilih dan elemen anak.

Sehingga versi jQuery 1.7, kaedah on() ialah pengganti baharu untuk kaedah bind(), live() dan delegate(). Kaedah ini membawa banyak kemudahan kepada API dan disyorkan kerana ia memudahkan asas kod jQuery.

Menyusahkan untuk mendaftarkan acara untuk satu elemen secara berasingan

$("p").click(function(){
  $(this).hide();
});
$("p").mouseenter(function(){
  $(this).css("background","blue");
});

Jadi anda boleh mendaftar berbilang acara sekaligus melalui

$("p").on({
  click:function(){
    $(this).hide();
  },
  mouseenter:function(){
    $(this).css("background","blue");
  }
});
 
//还可以合并
$("div").on( "mouseenter mouseleave", function(){
    $(this).toggleclass( "current");
})

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

1 Kaedah on() boleh mengikat peristiwa secara dinamik kepada 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 ditambah, dan 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.

Pengendali acara yang ditambahkan menggunakan kaedah on() digunakan pada elemen semasa dan akan datang (seperti elemen baharu yang dicipta oleh skrip).

ikat:

function(
 types, data, fn ) {
  return this.on(
 types, null,
 data, fn );
},

secara langsung:

function(
 types, data, fn ) {
  jQuery(
this.context
 ).on( types, this.selector,
 data, fn );
  return this;
},

wakilkan:

function(
 selector, types, data, fn ) {
  return this.on(
 types, selector, data, fn );
}

2. Kaedah on() boleh menambah satu atau lebih pengendali acara pada satu-satu masa, yang boleh meningkatkan kecekapan

Banyak artikel telah menyebut menggunakan acara menggelegak dan proksi untuk meningkatkan kecekapan acara mengikat, kebanyakannya tidak menyenaraikan perbezaan tertentu, 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.

• Ikatan biasa (sebut saja)

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

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

Masa pelaksanaan proses pengikatan
Pengikatan biasa adalah bersamaan dengan mendaftarkan acara klik secara berasingan pada li, yang mengambil kira-kira 4.2M memori dan mengambil masa kira-kira 72ms.
.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.

[Pembelajaran yang disyorkan: tutorial video jQuery,

video bahagian hadapan web]

Atas ialah kandungan terperinci Apakah kelebihan kaedah on dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!