Apa perbedaan antara `on` dan` live` atau `bind`?

172

Di jQuery v1.7 metode baru, onditambahkan. Dari dokumentasi:

'Metode .on () melampirkan penangan acara ke set elemen yang dipilih saat ini di objek jQuery. Pada jQuery 1.7, metode .on () menyediakan semua fungsi yang diperlukan untuk melampirkan penangan acara. '

Apa bedanya dengan livedan bind?

jquery Diego
sumber
5
terkait : Apa perbedaan antara jQuery .live () dan .on ()
Felix Kling
Pernah mencari sesuatu seperti itu sebelum bertanya dan tidak berhasil. Terima kasih!
Diego

Jawaban:

329

on()adalah upaya untuk menggabungkan sebagian besar fungsi pengikatan acara jQuery menjadi satu. Ini memiliki bonus tambahan merapikan inefisiensi dengan livevs delegate. Dalam versi jQuery yang akan datang, metode ini akan dihapus dan hanya ondan oneakan ditinggalkan.

Contoh:

// Using live()
$(".mySelector").live("click", fn);

// Equivalent `on` (there isn't an exact equivalent, but with good reason)
$(document).on("click", ".mySelector", fn);
// Using bind()
$(".mySelector").bind("click", fn);

// Equivalent `on`
$(".mySelector").on("click", fn);
// Using delegate()
$(document.body).delegate(".mySelector", "click", fn);

// Equivalent `on`
$(document.body).on("click", ".mySelector", fn);

Secara internal, jQuery memetakan semua metode ini dan steno pengendali event handler ke on()metode, lebih lanjut menunjukkan bahwa Anda harus mengabaikan metode ini dari sekarang dan cukup gunakan on:

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 );
},

Lihat https://github.com/jquery/jquery/blob/1.7/src/event.js#L965 .

Andy E
sumber
Seperti @JamWaffles mengatakan jawaban yang paling bisa dimengerti. Bisakah Anda menambahkan perbandingan antara pada dan mendelegasikan untuk menyelesaikan jawaban? Terima kasih!
Diego
lol, Anda menambahkan sumber jquery 4 detik sebelum saya: D btw konteks setara hidup adalah dokumen, bukan document.body
Esailija
1
Anda mungkin ingin merujuk ke tag 1.7 sebagai gantinya, jika tidak perubahan di masa depan mungkin membuat tautan Anda tidak valid (tidak menunjuk ke lokasi yang tepat): github.com/jquery/jquery/blob/1.7/src/event.js#L965
Felix Kling
3
$(document.body).delegate("click", ".mySelector", fn);seharusnya$(document.body).delegate(".mySelector", "click", fn);
Sonny
2
@dsdsdsdsd, off berfungsi sebagai pengganti generik untuk unbind, unlive, dan undelegate.
Andy E
12

ondi alam sangat dekat delegate. Jadi mengapa tidak menggunakan delegasi? Itu karena ontidak datang sendiri. ada off, untuk melepaskan ikatan acara dan onemembuat acara yang akan dieksekusi satu kali saja. Ini adalah "paket" acara baru.

Masalah utama liveadalah bahwa ia menempel pada "jendela", memaksa acara klik (atau acara lainnya) pada elemen jauh di dalam struktur halaman (dom), untuk "melambung" ke bagian atas halaman untuk menemukan acara pawang bersedia menghadapinya. Di setiap level, semua penangan acara harus diperiksa, ini dapat bertambah dengan cepat, jika Anda melakukan pelafalan mendalam ( <body><div><div><div><div><table><table><tbody><tr><td><div><div><div><ul><li><button> etc etc etc...)

Jadi, bindseperti click, seperti pengikat acara pintasan lainnya, lampirkan langsung ke target acara. Jika Anda memiliki tabel, katakanlah, 1000 baris dan 100 kolom, dan masing-masing sel 100'000 menyertakan kotak centang yang klik yang ingin Anda tangani. Melampirkan 100'000 penangan acara akan membutuhkan banyak waktu pada pemuatan halaman. Membuat satu acara di tingkat tabel, dan menggunakan delegasi acara adalah beberapa urutan besarnya lebih efisien. Target acara akan diambil pada waktu pelaksanaan acara. " this" akan menjadi tabel, " event.target" tapi akan menjadi " this" biasa Anda dalam suatu clickfungsi. Sekarang yang menyenangkan onadalah " this" akan selalu menjadi target acara, dan bukan wadah yang dilampirkan.

roselan
sumber
Tidakkah delegasi datang dengan undelegate?
DaveWalley
1
Ya. tempat yang bagus. Anda belajar setiap hari;) (Doc telah meningkat pesat sejak 2011)
roselan
5

dengan .onmetode yang dimungkinkan untuk dilakukan .live,, .delegatedan .binddengan fungsi yang sama tetapi dengan .live()hanya .live()dimungkinkan (mendelegasikan acara ke dokumen).

jQuery("#example").bind( "click", fn ) = jQuery( "#example").on( "click", fn );

jQuery("#example").delegate( ".examples", "click", fn ) = jQuery( "#example" ).on( "click", ".examples", fn )

jQuery("#example").live( fn ) = jQuery( document ).on( "click", "#example", fn )

Saya dapat mengkonfirmasi ini langsung dari sumber jQuery:

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 );
},

jQuery (this.context)? this.context=== documentdalam banyak kasus

Esailija
sumber
3

(Kalimat pembuka saya lebih masuk akal sebelum Anda mengubah pertanyaan. Awalnya Anda akan mengatakan "Apa bedanya dengan live?")

onlebih seperti delegatedaripada itu live, pada dasarnya merupakan bentuk terpadu binddan delegate(pada kenyataannya, tim mengatakan tujuannya adalah "... untuk menyatukan semua cara melampirkan acara ke dokumen ..." ).

livepada dasarnya on(atau delegate) dilampirkan pada dokumen secara keseluruhan. Sudah usang pada v1.7 dalam mendukung menggunakan onatau delegate. Ke depan, saya menduga kita akan melihat kode onhanya menggunakan , daripada menggunakan bindatau delegate(atau live) ...

Jadi dalam praktiknya, Anda dapat:

  1. Gunakan onseperti bind:

    /* Old: */ $(".foo").bind("click", handler);
/* New: */ $(".foo").on("click", handler);

  2. Gunakan onlike delegate(delegasi acara yang di-root pada elemen yang diberikan):

    /* Old: */ $("#container").delegate(".foo", "click", handler);
/* New: */ $("#container").on("click", ".foo", handler);

  3. Gunakan onlike live(delegasi acara yang berakar pada dokumen):

    /* Old: */ $(".foo").live("click", handler);
/* New: */ $(document).on("click", ".foo", handler);
TJ Crowder
sumber
1
Di halaman yang saya tautkan mengatakan "Jika HTML baru disuntikkan ke halaman, pilih elemen dan lampirkan event handler setelah HTML baru ditempatkan ke halaman. Atau, gunakan event yang didelegasikan untuk melampirkan event handler, seperti yang dijelaskan selanjutnya." . Jadi lebih cenderung mengikat, bukan hidup. Apakah saya benar?
Diego
@ Diego: onadalah kombinasi dari binddan delegate, dan seperti yang saya katakan, tidak terlalu suka live. Anda dapat menggunakan onlike bind(melampirkan handler langsung ke suatu elemen), atau Anda dapat menggunakan onlike delegate(melampirkan handler ke suatu elemen, tetapi memecat event hanya jika elemen yang sebenarnya diklik cocok dengan pemilih, dan seolah-olah elemen itu adalah satu-satunya yang peristiwa terjadi pada - misalnya, delegasi acara), atau Anda dapat menggunakannya seperti live( delegatemenggunakan dokumen sebagai root). Delegasi acara yang membuatnya berguna jika Anda menambahkan elemen secara dinamis.
TJ Crowder
1
live lama juga bisa digunakan seperti delegate: $("#id", ".class").live(fn)= $(".class").delegate("#id", fn );Sebenarnya dalam sumber jQuery lama mereka menggunakan live sebagai case umum dan delegate sebagai case khusus, yang membuat ini semakin membingungkan ketika Anda memikirkannya.
Esailija
@ Eailija: Cukup adil. Saya tidak berpikir itu penggunaannya dikenal, karena mereka menambahkan delegatedengan cepat, tapi tetap saja. :-)
TJ Crowder
2

live adalah jalan pintas untuk .on () sekarang

//from source http://code.jquery.com/jquery-1.7.js
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
}

juga posting ini mungkin bermanfaat untuk Anda http://blog.jquery.com/2011/11/03/jquery-1-7-released/

doochik
sumber
2

Tidak ada satu untuk case use dasar. Kedua garis ini secara fungsional sama

$( '#element' ).bind( 'click', handler );
$( '#element' ).on( 'click', handler );

.on () juga dapat melakukan delegasi acara, dan lebih disukai.

.bind () sebenarnya hanya alias untuk .on () sekarang. Berikut definisi fungsi bind di 1.7.1

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

Gagasan untuk menambahkan .on () adalah untuk membuat API acara terpadu, daripada memiliki beberapa fungsi untuk mengikat acara; .on () menggantikan .bind (), .live () dan .delegate ().

Dan
sumber
0

Sesuatu yang harus Anda waspadai jika Anda ingin mendapatkan event handler yang terkait dengan elemen - perhatikan elemen mana yang dilampirkan handler!

Misalnya, jika Anda menggunakan:

$('.mySelector').bind('click', fn);

Anda akan mendapatkan penangan acara menggunakan:

$('.mySelector').data('events');

Tetapi jika Anda menggunakan:

$('body').on('click', '.mySelector', fn);

Anda akan mendapatkan penangan acara menggunakan:

$('body').data('events');

(dalam kasus terakhir objek acara yang relevan akan memiliki pemilih = ". mySelector")

Alexander
sumber
eventsbagaimanapun tidak berdokumen dan saya pikir itu tidak lagi berfungsi di 1.9
John Dvorak
Baik. Seseorang dapat menggunakan data bukan data dalam versi yang lebih baru. Jawabannya adalah tentang perbedaan dalam "pemilik acara" dan bukan sintaks yang tepat untuk versi lama atau baru. Ada posting lain tentang sintaks yang tepat untuk berbagai versi JQuery. Misalnya stackoverflow.com/questions/2518421/…
Alexander