jQuery's .bind () ve .on () karşılaştırması

Yeni fonksiyondan bahseden iki harika makale buldum .on(): jquery4u.com , elijahmanor.com .

.bind()Hala kullanımın daha iyi olduğu herhangi bir yol var mı .on()?

Örneğin, şöyle bir örnek kod var:

$("#container").click( function( e ) {} )

Seçici tarafından yalnızca bir öğe aldığımı ve benim durumumda, sayfam yüklendiğinde <div>adlandırılmış olanın var olduğunu not edebilirsiniz #container; dinamik olarak eklenmedi. JQuery'nin en son sürümünü kullandığımdan bahsetmek önemlidir: 1.7.2.

Bu örnek için, işlev tarafından sağlanan diğer özellikleri kullanmasam bile .on()yerine kullanılmalıdır ?.bind().on()

Dahili olarak, jQuery'nin geçerli sürümünde .binddoğrudan eşler .on. (Aynı şey geçerli .live.) Bunun .bindyerine , küçük ama pratik olarak önemsiz bir performans isabeti var .

Ancak, .bindgelecekteki sürümlerden herhangi bir zamanda kaldırılabilir. Kullanmaya devam etmek için bir neden yoktur .bindve .onbunun yerine tercih etmek için her neden yoktur .

Bu snippet'lerin hepsi aynı şeyi yapar:

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

Bununla birlikte, hepsi aynı şeyi yapan bunlardan çok farklıdır:

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

Olay işleyicileri ikinci seti kullanmak olay heyet ve dinamik olarak eklenen elemanlar için çalışacaktır. Delegasyon kullanan olay işleyicileri de çok daha performanslıdır. İlk set, dinamik olarak eklenen öğeler için çalışmaz ve performans için çok daha kötüdür.

jQuery'nin on()işlevi henüz mevcut olmayan yeni bir işlevsellik sunmaz, yalnızca jQuery'deki olay işlemeyi standart hale getirme girişimidir (artık canlı, bağlama veya temsilci arasında karar vermek zorunda değilsiniz).

Doğrudan yöntemler ve .delegateüstün API'lardır .onve bunları kullanımdan kaldırmaya niyeti yoktur.

Doğrudan yöntemler tercih edilir, çünkü kodunuz daha az dize olarak yazılır. Sessiz bir hata yerine bir olay adını yanlış yazdığınızda hemen hata alırsınız. Bence, o yazıp okumak için de daha kolay olacaktır clickdahaon("click"

.delegateDaha üstündür .onçünkü Tartışmanın düzenin:

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

Hemen delege edildiğini biliyorsunuz, çünkü delege diyor. Ayrıca seçiciyi anında görürsünüz.

İle .onkendisine hemen bile delege eğer açık değil ve seçici için sonunda bakmak zorunda:

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "selector" );

Şimdi, isimlendirmesi .bindgerçekten korkunç ve yüz değeri daha kötü .on. Fakat.delegate yetki verilmemiş olaylar gerçekleştirilemez ve doğrudan bir yöntemi olmayan olaylar vardır, bu nedenle bu gibi nadir bir durumda kullanılabilir, ancak yalnızca yetki verilen ve yetki verilmeyen olaylar arasında temiz bir ayırma yapmak istediğiniz için.

Kaynak koduna bakarsanız $.fn.bind, bunun sadece bir yeniden yazma işlevi olduğunu göreceksiniz on:

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

http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind

JQuery belgelerinden:

JQuery 1.7'den itibaren .on () yöntemi, olay işleyicilerini bir belgeye iliştirmek için tercih edilen yöntemdir. Önceki sürümlerde, bir olay işleyicisini doğrudan öğelere eklemek için .bind () yöntemi kullanılır. İşleyiciler jQuery nesnesindeki seçili öğelere eklenir, bu nedenle bu öğelerin .bind () çağrısının gerçekleştiği noktada olması gerekir. Daha esnek olay bağlama için, .on () veya .delegate () içindeki olay yetkisi tartışmasına bakın.

http://api.jquery.com/bind/

Jquery 3.0 ve sonraki sürümlerde .bind kullanımdan kaldırılmıştır ve bunun yerine .on kullanmayı tercih ederler. @Blazemonger daha önce yanıt olarak kaldırılabilir ve kaldırılacağı için kesin. Daha eski sürümler için .bind ayrıca .on'u dahili olarak çağırır ve aralarında fark yoktur. Daha fazla ayrıntı için lütfen api'ye bakın.

.bind () için jQuery API belgeleri