Bu nereden geliyor

Ben ilk olarak bir WordPress kullanmak öğrendiği zaman, ben normalde bu gibi olaylara bağlı:

$('.my-widget a').click(function() {
    $(this).toggleClass('active');
});

Daha seçici hızı ve olay heyet öğrendikten sonra, "jQuery olay temsilci kodunuzu daha hızlı yapacaktır." bunu birkaç yerde okumuştum Bu gibi kod yazmaya başladım:

$('.my-widget').on('click','a',function() {
    $(this).toggleClass('active');
});

Bu da kaldırılmış davranışını çoğaltmak için önerilen yöntemdir .() canlı olay. Benim sitelerin bir sürü beri benim için önemli dinamik olan/widget her zaman Kaldır. Yukarıda tam olarak ne gibi davranamaz .(canlı) elemanları mevcut konteyner eklenen bu yana tek olsa,'.my-widget' davranış olacaktır. Ben dinamik olarak kod koştu sonra html bir blok eklemek, bu öğelerin olayları onlara bağlı değil. Bu gibi:

setTimeout(function() {
    $('body').append('<div class="my-widget"><a>Click does nothing</a></div>');
}, 1000);

Ne ben başarmak istiyorum:

1. eski davranış .(canlı) // anlamı henüz mevcut elemanlara olayları takma
2. faydaları .()
3. olayları bağlamak en hızlı performans
4. Basit bir şekilde olayları yönetmek için

Ben şimdi şöyle: tüm olayları takın

$(document).on('click.my-widget-namespace', '.my-widget a', function() {
    $(this).toggleClass('active');
});

Tüm hedefleri karşılamak gibi görünüyor. (Evet nedense IE yavaş, nedenini hiç bilmiyorum?) Hızlı sadece tek bir olay tekil bir öğe ve tek olay meydana geldiğinde değerlendirilir ikincil seçici (lütfen bu burada yanlış varsa düzeltin) bağlı olduğu için. Ad daha kolay olay dinleyici geçiş yapmak için yapar bu yana müthiş.

Çözüm/Benim Sorum

JQuery olaylar her zaman bağlı olması gerektiğini düşünmeye başlıyorum $(belge).
Bunu istemem için bir sebep var mı?
Bu en iyi yöntem olarak kabul edilebilir mi? Değil, neden?

Eğer bütün bu olayı okuduysanız, teşekkür ederim. Herhangi/tüm geribildirim/düşüncelerine saygi duyuyorum.

Varsayımlar:

1. JQuery kullanarak destekler .on() // en az 1.7 sürümü
2. Dinamik olarak eklenecek olay içerik eklenen istiyorsun

Kaynaklar/Örnekler:

1. http://24ways.org/2011/your-jquery-now-with-less-suck
2. http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
3. http://www.jasonbuckboyer.com/playground/speed/speed.html
4. http://api.jquery.com/on/

document nesne tüm temsilci olay işleyicileri bağlamak gerekir. Muhtemelen oluşturabilirsiniz, en kötü performans gösteren bir senaryodur.

Öncelikle, olay heyet her zaman kodunuzu daha hızlı yapmaz. Bazı durumlarda avantajlı bazı durumlarda. Aslında olay heyet gerektiğinde olay heyet kullanın ve yararlanırsınız zaman gerekir. Aksi takdirde, bu genellikle daha verimli olacak gibi, bu olayın gerçekleştiği olay işleyicileri doğrudan nesnelere bağlamak gerekir.

İkinci devre, olmamalıdır bağlama belge düzeyinde olayları temsilci. Bu .live() bu olaylar bu şekilde bağlı çok sayıda yüklü olduğunda çok yetersiz olduğu için kullanım dışı bırakılmıştır yüzden. Temsilci olay işleme için dinamik olmayan en üst onları bağlamak için ÇOK daha etkili olacaktır.

Üçüncü kapalı, tüm olayları iş ya da tüm sorunları Heyeti ile çözülebilir. Örneğin, eğer sen de istersen önünü önemli olaylarda bir giriş kontrol ve blok geçersiz anahtarları olmaktan girdi içine girdi kontrol, bunu yapamazsınız bu temsilci olay işleme için zaman olay kabarcıklar için yetkilendirilen işleyici, zaten işlenmiş tarafından kontrol giriş ve geç de olsa etkileyen bir davranış.

İşte etkinlik temsilcisi gerekli ya da avantajlı olduğu durumlar:

• Olayları yakalama nesneleri/kaldırıldı ve hala açıkça olay işleyicileri her zaman yeniden bağlamanız gerek kalmadan onları olaylara çekmek amacıyla oluşturulan dinamik olarak ne zaman yeni bir tane oluşturun.
• Hepsi aynı olay işleyicisi istediğiniz nesneleri bol bol en az yüzlerce olduğu) varsa. Bu durumda, bağlama Kur zaman daha verimli olabilir hatta daha doğrudan olay işleyicileri yerine bir temsilci olay işleyicisi. Not temsilci, olay işleme her zaman doğrudan olay işleyicileri daha çalışma zamanı daha az etkilidir.
• (Belgede daha yüksek bir düzeyde) belge içinde herhangi bir öğe üzerinde meydana gelen olayları yakalamak için çalışıyoruz.
• Tasarım açıkça olay köpürme ve stopPropagation kullanırken() bir sorunu çözmek için ya da sayfanızda özelliği.

Bu biraz daha iyi anlamak için nasıl bir WordPress kullanmak için temsilci işleyicileri iş anlamak gerekir. Aradığınızda şöyle bir şey:

$("#myParent").on('click', 'button.actionButton', myFn);

#myParent nesne üzerinde genel bir WordPress kullanmak olay işleyicisi yükler. Ne zaman bir tıklama olay kabarcıklar kadar bu temsilci olay işleyicisi, DV ilerlemesi listenin temsilci olay işleyicileri bağlı bu nesne ve kaynak elemanı için olay eşleşen herhangi bir seçiciler yetki devredilen olay işleyicileri.

Seçiciler oldukça karmaşık olabilir, çünkü bu bir WordPress kullanmak her seçici ayrıştırma ve özgün olay hedefin özellikleri için ise her seçici eşleşip eşleşmediğini görmek için karşılaştırmak anlamına gelir. Bu ucuz bir işlem değildir. Büyütülecek bir şey varsa sadece bir tane, ama eğer koymak tüm seçiciler belge nesne ve orada yüzlerce seçiciler karşılaştırmak için her kabarmış olay, bu ciddi olarak başlamak için kösteklemek olay işleme performansı.

Bu nedenle, temsilci, olay işleyicileri kurmak istiyorum temsilci olay işleyicisi pratik olarak hedef nesne olarak bulunur. Bu daha az olaylar her olay işleyicisi temsilci, böylece performansı geliştirmek kabarcık anlamına gelir. Belge nesne üzerindeki tüm atanmış olaylar koyarak kabarmış olayları tüm temsilci olay işleyicileri geçmesi ve mümkün olan tüm temsilci olay seçiciler karşı değerlendirilmesi gerekiyor çünkü en kötü performans. Bu .live() .live() mi ne olduğu için önerilmiyor ve çok verimsiz olduğunu kanıtladı zaten.

Bu yüzden, en iyi performans elde etmek için:

1. Yalnızca gerçekten ihtiyacınız yoksa performans artışı sağlıyor, olay işleme temsilci. Sadece her zaman gerçekten ihtiyacınız olmadığında çok kolay, çünkü, çünkü bunu kullanmıyorum. Aslında direk bağlama olayı daha zaman merkezden olay daha da kötü yapar.
2. Mümkün olduğunca olayın kaynağına yakın üst temsilci olay işleyicileri eklemek. Eğer olayları yakalamak istediğiniz dinamik unsurlar var çünkü temsilci olay işleme kullanıyorsanız, o zaman kendisi dinamik değil, en yakın üst seçin.
3. Temsilci, olay işleyicileri için kolay değerlendirmek seçiciler kullanın. İzlediyseniz nasıl temsilci olay işleme çalışır, sen-ecek anlamak bir olay işleyicisi temsilci olmalı kıyasla çok nesneleri birçok kez tespit gibi verimli bir seçici olarak mümkün ya da ekleme basit sınıflar için nesneleri çok daha basit seçiciler kullanılır artacak performans temsilci olay işleme.