javascript - Doğrudan vs. Yetkilendirilmiş - jQuery .on()

jQuery .on() yöntemi kullanarak doğrudan ve vekil olay işleyicileri arasındaki bu belirli farkı anlamaya çalışıyorum. Özellikle, bu paragraftaki son cümle:

Bir selector sağlandığında, olay işleyici delegeli olarak adlandırılır. Olay doğrudan bağlı elemanda gerçekleştiğinde işleyici çağrılmaz, yalnızca seçici ile eşleşen alt öğeler (iç öğeler) için çağrılır. jQuery, olayı hedef öğeden işleyicinin ekli olduğu öğeye doğru (yani en içten en dışa doğru) iletir ve bu yolda seçici ile eşleşen herhangi bir öğe için işleyiciyi çalıştırır.

"Herhangi bir öğe için işleyiciyi çalıştırır" ne anlama geliyor? Konseptle denemeler yapmak için bir test sayfası oluşturdum. Ama aşağıdaki iki yapı da aynı davranışa yol açıyor:

$("div#target span.green").on("click", function() {
   alert($(this).attr("class") + " is clicked");
});

veya,

$("div#target").on("click", "span.green", function() {
   alert($(this).attr("class") + " is clicked");
});

Belki biri bu noktayı açıklığa kavuşturmak için farklı bir örneğe atıfta bulunabilir mi? Teşekkürler.

Cevap #1

Durum 1 (doğrudan):

$("div#target span.green").on("click", function() {...});

== Hey! div#target içindeki her span.green dinlesin: üzerine tıklandığında X yap.

Vaka 2 (vekil aracılığıyla):

$("div#target").on("click", "span.green", function() {...});

== Hey, div#target! Çocuk elemanlarından herhangi biri olan "span.green" tıklandığında, onlar ile X yap.

Başka bir deyişle...

Durum 1'de, bu spanlerin her birine ayrı ayrı talimatlar verilmiştir. Yeni spanler oluşturulursa, talimatı duymamış olacaklar ve tıklamalara yanıt vermeyeceklerdir. Her span, kendi olaylarından doğrudan sorumludur.

Durum 2'de, sadece konteynere talimat verilmiştir; alt öğeleri adına tıklamaları fark etmekten sorumludur. Olayları yakalama işi devredilmiştir. Bu aynı zamanda, talimatın gelecekte oluşturulacak alt öğeler için de uygulanacağı anlamına gelir.

Cevap #2

İlk yöntem, $ ("div#target span.green").on(), kod yürütüldüğü anda seçiciyle eşleşen span(lar)a doğrudan bir tıklama işleyicisi bağlar. Bu, eğer daha sonra başka spanler eklenirse (veya sınıfları eşleşmek için değiştirilirse) bu spanlerin bu tıklama işleyicisinden mahrum kalacağı ve bir tıklama işleyicisine sahip olmayacağı anlamına gelir. Ayrıca, eğer daha sonra spanlerden birinin "green" sınıfını kaldırırsanız, tıklama işleyicisi çalışmaya devam edecektir - jQuery işleyicinin nasıl atandığını takip etmez ve seçicinin hâlâ eşleşip eşleşmediğini kontrol etmez.

İkinci yol, $ ("div#target").on(), div ile eşleşen div'lere bir tıklama işleyicisi bağlar (yine, bu an o anda eşleşenler için geçerlidir), fakat div içinde bir yere tıklama olduğunda işleyici fonksiyonu yalnızca tıklama yalnızca div üzerinde değil, aynı zamanda .on()'un ikinci parametresindeki seçici ile eşleşen bir alt eleman üzerinde gerçekleşmişse çalıştırılır, "span.green". Bu şekilde yapıldığında, bu alt span'ların ne zaman oluşturulduğunun önemi yoktur; üzerine tıklanıldığında işleyici yine de çalışacaktır.

Dolayısıyla, içeriğini dinamik olarak eklemeyen veya değiştirmeyen bir sayfa için iki yöntem arasında bir farkı fark etmeyeceksiniz. Eğer dinamik olarak ekstra alt öğeler ekliyorsanız, ikinci sözdizimi, tıklama işleyicilerini onlara atamakla endişelenmenize gerek olmadığı anlamına gelir çünkü bunu zaten ebeveynde bir kez yaptınız.