`On` ve` live` veya `bind` arasındaki fark nedir?

172

JQuery v1.7'de yeni bir yöntem oneklendi. Belgelerden:

'.On () yöntemi, olay işleyicilerini jQuery nesnesindeki seçili öğe kümesine ekler. JQuery 1.7'den itibaren .on () yöntemi, olay işleyicilerini eklemek için gereken tüm işlevleri sağlar. '

İle fark nedir liveve bind?

jquery

— Diego
kaynak

5

related : jQuery .live () ve .on ()

— Felix Kling

Sormadan önce böyle bir şey aramıştı ve başarılı olamadı. Teşekkürler!

— Diego

329

on()jQuery'nin olay bağlama işlevlerinin çoğunu birleştirme girişimidir. Bu, livevs ile verimsizliklerin toplanması avantajına sahiptir delegate. JQuery'nin gelecekteki sürümlerinde, bu yöntemler kaldırılacak ve yalnızca onveone bırakılacaktır.

Örnekler:

// 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);

Dahili olarak, jQuery tüm bu yöntemleri ve stenoi olay işleyicisi ayarlayıcılarını on()yönteme eşler ve bundan sonra bu yöntemleri göz ardı etmeniz ve yalnızca şunu kullanmanız gerektiğini belirtir 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 );
},

Bkz. Https://github.com/jquery/jquery/blob/1.7/src/event.js#L965 .

— Andy E
kaynak

@ JamesWaffles en anlaşılır cevap dedi. Cevabı tamamlamak için on ile temsilci arasındaki karşılaştırmayı ekler misiniz? Teşekkürler!

— Diego

lols, jquery kaynağını benden 4 saniye önce eklediniz: D btw canlı eşdeğeri bağlam belge değil belge

— .body

1

Bunun yerine 1.7 etiketine başvurmak isteyebilirsiniz, aksi takdirde gelecekteki değişiklikler bağlantınızı geçersiz kılabilir (doğru konumu göstermeyebilir): github.com/jquery/jquery/blob/1.7/src/event.js#L965

— Felix Kling

3

$(document.body).delegate("click", ".mySelector", fn);olmalı$(document.body).delegate(".mySelector", "click", fn);

— Sonny

2

@dsdsdsdsd, off unbind, unlive ve undelegate için genel değiştirme görevi görür.

— Andy E

12

ondoğada çok yakın delegate. Öyleyse neden temsilci kullanmıyorsunuz? Çünkü onyalnız gelmiyor. orada offunbind olaya ve, oneyalnızca bir kez yürütülecek bir etkinlik oluşturun. Bu yeni bir etkinliğin "paketi" dir.

Asıl sorun, live"pencere" ye bağlanması, sayfa yapısının (dom) içindeki bir öğedeki tıklama etkinliğini (veya başka bir etkinliği), bir etkinlik bulmak için sayfanın üst kısmına "kabarmaya" zorlamasıdır. onunla başa çıkmak istekli işleyici. Her seviyede, tüm olay işleyicilerinin kontrol edilmesi gerekir, eğer derin derinleştirme yaparsanız ( <body><div><div><div><div><table><table><tbody><tr><td><div><div><div><ul><li><button> etc etc etc...)

Yani, diğer kısayol olay bağlayıcıları bindgibi click, doğrudan olay hedefine eklenir. Diyelim ki 1000 satır ve 100 sütunluk bir tablonuz varsa ve 100.000 hücrenin her biri, işlemek istediğiniz tıklamayı içeren bir onay kutusu içerir. 100.000 olay işleyicisinin eklenmesi sayfa yüklenirken çok zaman alacaktır . Tablo düzeyinde tek bir olay oluşturma ve olay yetkisi kullanma birkaç büyüklük sırası daha verimlidir. Olay hedefi olay yürütme zamanında alınacaktır. " this" tablo olacak, ancak " event.target" thisbir clickfonksiyonda olağan " " olacak . Şimdi güzel olan şey on" this" her zaman olay hedefi olacak ve bağlı olduğu kap değil.

— roselan
kaynak

Delege delege ile gelmiyor mu?

— DaveWalley

1

Evet. iyi tespit. Her gün öğrenirsiniz;) (

— Doküman 2011'den

5

ile .onyöntemle bunu yapmak mümkündür .live, .delegateve .bindaynı işleve sahip fakat .live()sadece.live() mümkün (belgeye olayları delege) olduğunu.

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 )

Bunu doğrudan jQuery kaynağından onaylayabilirim:

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=== documentçoğu durumda

— Esailija
kaynak

3

(Soruyu değiştirmeden önce cümle daha anlamlı geldi. Başlangıçta "Farkı nedir live?"

ondaha delegateçok benziyor live, temelde birleşik bir biçim bindve delegate(aslında, ekip amacının "... olayları bir belgeye eklemenin tüm yollarını birleştirmek ..." olduğunu söyledi. ).

livetemel olarak on(veya delegate) belgeye bir bütün olarak iliştirilir. Bu oluyor v1.7 tarihinden itibaren kullanımdan kaldırılmıştır kullanarak lehine onveya delegate. Bundan sonra, biz kod kullanarak göreceğiz şüpheli onyalnızca ziyade kullanarak bindveya delegate(veyalive ) ...

Yani pratikte şunları yapabilirsiniz:

onGibi kullanın bind:

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

Şunun ongibi kullan delegate(belirli bir öğeye dayanan etkinlik yetkisi):

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

Şunun ongibi kullan live(belgedeki etkinlik yetkisi):

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

— TJ Kalabalık
kaynak

1

Bağlantı verdiğim sayfada "Sayfaya yeni HTML enjekte ediliyorsa, öğeleri seçin ve yeni HTML sayfaya yerleştirildikten sonra olay işleyicileri ekleyin. Ya da, bir sonraki adımda açıklandığı gibi bir olay işleyicisi eklemek için yetki verilen olayları kullanın. . Yani daha büyük olasılıkla bağlanıyor, canlı değil. Haklı mıyım?

— Diego

@Diego: onbir kombinasyonudur bindve delegateve dediğim gibi, pek değil gibi live. Sen kullanabilirsiniz ongibi bind(bir elemanın doğrudan bir işleyici eklemek) veya kullanabilir ongibi delegate(bir öğeye bir işleyici eklemek, ama gerçek eleman eşleşen bir seçici tıklandığında yalnızca olayı ve bu elemanın sanki biri idi olay gerçekleşti - ör. olay yetkisi) veya bunu live( delegatebelge kökü olarak kullanarak) gibi kullanabilirsiniz . Dinamik olarak öğeler ekliyorsanız, etkinlik delegasyonu yararlı olur.

— TJ Crowder

1

eski canlı delege gibi de kullanılabilir: $("#id", ".class").live(fn)= $(".class").delegate("#id", fn );Aslında eski jQuery kaynağında genel durum olarak canlı kullandılar ve özel bir vaka olarak delege oldular, bu da bunu düşündüğünüzde daha da kafa karıştırıcı hale getirdi.

— Esailija

@Esailija: Yeterince adil. Bunun bilinen bir kullanım olduğunu düşünmüyorum, çünkü delegateçabucak eklediler , ama yine de. :-)

— TJ Crowder

2

live şimdi .on () kısayoludur

//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;
}

Ayrıca bu yazı sizin için yararlı olabilir http://blog.jquery.com/2011/11/03/jquery-1-7-released/

— doochik
kaynak

2

Temel kullanım durumu için bir tane yoktur. Bu iki çizgi işlevsel olarak aynı

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

.on () da olay yetkisi verebilir ve tercih edilir.

.bind () aslında .on () için yalnızca bir takma addır. Bağlama fonksiyonunun 1.7.1'deki tanımı

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

.On () ekleme fikri, bağlama olayı için birden fazla işleve sahip olmak yerine birleşik bir olay API'si oluşturmaktı; .on (), .bind (), .live () ve .delegate () yerine geçer.

— Dan
kaynak

0

Öğeyle ilişkili olay işleyicilerini almak istiyorsanız bilmeniz gereken bir şey - işleyicinin hangi öğeye bağlı olduğuna dikkat edin!

Örneğin, şunu kullanırsanız:

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

olay işleyicilerini aşağıdakileri kullanarak alırsınız:

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

Ancak kullanırsanız:

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

olay işleyicilerini aşağıdakileri kullanarak alırsınız:

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

(son durumda, ilgili olay nesnesinin selector = ". mySelector" olacaktır))

— Alexander
kaynak

eventszaten belgelenmemiş ve artık 1.9'da çalışmadığını düşünüyorum

— John Dvorak

Sağ. Yeni sürümlerde veri yerine _data kullanılabilir. Cevap, "etkinlik sahibindeki" farktan ziyade eski veya yeni sürümlerin tam sözdizimiyle ilgiliydi. Farklı JQuery sürümleri için tam sözdizimi hakkında başka gönderiler de vardır. Örneğin stackoverflow.com/questions/2518421/…

— Alexander