jQuery: aynı olay için birden fazla işleyici

İki olay işleyiciyi aynı öğe için aynı olaya bağlarsam ne olur?

Örneğin:

var elem = $("...")
elem.click(...);
elem.click(...);

Son işleyici kazanır mı, yoksa her iki işleyici de çalışır mı?

Her iki işleyici de çalışır, jQuery olay modeli bir öğe üzerinde birden fazla işleyiciye izin verir, bu nedenle daha sonraki bir işleyici eski bir işleyiciyi geçersiz kılmaz.

İşleyiciler, bağlı oldukları sırayla yürütülür .

F ve g olmak üzere iki işleyiciniz olduğunu ve bunların bilinen ve sabit bir sırada yürütüldüğünden emin olmak istediğinizi varsayalım, sadece bunları kapsülleyin:

$("...").click(function(event){
  f(event);
  g(event);
});

Bu şekilde (jQuery perspektifinden) , belirtilen sırayla f ve g'yi çağıran yalnızca bir işleyici vardır .

jQuery's .bind (), bağlı olduğu sırada açılır :

Bir olay bir öğeye ulaştığında, öğe için o olay türüne bağlı tüm işleyiciler tetiklenir. Kayıtlı birden çok işleyici varsa, bunlar her zaman bağlı oldukları sırayla yürütülür. Tüm işleyiciler yürütüldükten sonra, olay normal olay yayılma yolu boyunca devam eder.

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

JQuery'nin diğer işlevleri (ör. .click()) Kısayolları olduğu için .bind('click', handler), bağlı oldukları sırada da tetiklendiklerini tahmin ediyorum.

Olayları sırayla yürütmek için zincirleme kullanabilmeniz gerekir, örneğin:

$('#target')
  .bind('click',function(event) {
    alert('Hello!');
  })
  .bind('click',function(event) {
    alert('Hello again!');
  })
  .bind('click',function(event) {
    alert('Hello yet again!');
  });

Aşağıdaki kod aynı yapıyor sanırım

$('#target')
      .click(function(event) {
        alert('Hello!');
      })
      .click(function(event) {
        alert('Hello again!');
      })
      .click(function(event) {
        alert('Hello yet again!');
      });

Kaynak: http://www.peachpit.com/articles/article.aspx?p=1371947&seqNum=3

TFM ayrıca şunları söylüyor:

Bir olay bir öğeye ulaştığında, öğe için o olay türüne bağlı tüm işleyiciler tetiklenir. Kayıtlı birden çok işleyici varsa, bunlar her zaman bağlı oldukları sırayla yürütülür. Tüm işleyiciler yürütüldükten sonra, olay normal olay yayılma yolu boyunca devam eder.

Her iki işleyici de çağrılır.

Satır içi etkinlik bağlamayı düşünüyor olabilirsiniz (ör."onclick=..."Büyük bir dezavantaj olan bir olay için ) olabilirsiniz.

jQuery, DOM Düzey 2 olay kayıt modeline uygundur :

DOM Etkinlik Modeli, birden fazla etkinlik dinleyicisinin tek bir Etkinlik Hedefine kaydedilmesini sağlar. Bunu başarmak için, olay dinleyicileri artık özellik değerleri olarak depolanmaz

Stephan202'nin enkapsülasyonu ve çoklu olay dinleyicileri kullanılarak başarılı bir şekilde çalışmasını sağladı 3 arama sekmesi var, bir Array giriş metin kimlikleri tanımlayalım:

var ids = new Array("searchtab1", "searchtab2", "searchtab3");

Searchtab1 içeriği değiştiğinde, searchtab2 ve searchtab3'ü güncellemek istiyorum. Kapsülleme için şu şekilde mi:

for (var i in ids) {
    $("#" + ids[i]).change(function() {
        for (var j in ids) {
            if (this != ids[j]) {
                $("#" + ids[j]).val($(this).val());
            }
        }
    });
}

Birden fazla olay dinleyicisi:

for (var i in ids) {
    for (var j in ids) {
        if (ids[i] != ids[j]) {
            $("#" + ids[i]).change(function() {
                $("#" + ids[j]).val($(this).val());
            });
        }
    }
}

Her iki yöntemi de seviyorum, ancak programcı kapsüllemeyi seçti, ancak çoklu olay dinleyicileri de çalıştı. Test etmek için Chrome'u kullandık.

Bir işleyicinin birbiri ardına gerçekleşmesini garanti etmek için bir geçici çözüm vardır: ikinci işleyiciyi içeren bir elemana takın ve olayın kabarmasına izin verin. Konteynere bağlı işleyicide event.target'a bakabilir ve ilgilendiğiniz bir şey yapabilirsiniz.

Kaba, belki, ama kesinlikle işe yaramalı.

jquery, birden çok olay işleyicisine izin verdiği için her iki işleyiciyi de yürütür. Örnek kod oluşturdum. Deneyebilirsin

gösteri