jQuery: więcej niż jeden program obsługi dla tego samego zdarzenia

Co się stanie, jeśli powiążę dwa programy obsługi zdarzeń z tym samym zdarzeniem dla tego samego elementu?

Na przykład:

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

Czy ostatni program obsługi "wygrywa", czy oba programy obsługi zostaną uruchomione?

Oba programy obsługi będą działać, model zdarzeń jQuery zezwala na wiele programów obsługi w jednym elemencie, dlatego późniejsza procedura obsługi nie zastępuje starszej procedury obsługi.

Przewodnicy będą wykonywać w kolejności, w jakiej zostali związani .

Załóżmy, że masz dwa programy obsługi, f i g , i chcesz mieć pewność, że są one wykonywane w znanej i ustalonej kolejności, a następnie po prostu je hermetyzuj:

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

W ten sposób jest (z punktu widzenia jQuery) tylko jeden handler, który wywołuje f i g w określonej kolejności.

jQuery's .bind () uruchamia się w kolejności, w jakiej został powiązany :

Gdy zdarzenie osiągnie element, zostaną wyzwolone wszystkie programy obsługi powiązane z tym typem zdarzenia dla elementu. Jeśli jest zarejestrowanych wiele programów obsługi, będą one zawsze wykonywane w kolejności, w jakiej zostały powiązane. Po wykonaniu wszystkich programów obsługi zdarzenie jest kontynuowane wzdłuż normalnej ścieżki propagacji zdarzenia.

Źródło: http://api.jquery.com/bind/

Ponieważ inne funkcje jQuery (np. .click()) Są skrótami .bind('click', handler), przypuszczam, że są one również uruchamiane w kolejności, w jakiej są powiązane.

Powinieneś być w stanie użyć łańcuchów do wykonywania zdarzeń w kolejności, np .:

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

Myślę, że poniższy kod robi to samo

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

Źródło: http://www.peachpit.com/articles/article.aspx?p=1371947&seqNum=3

TFM mówi również:

Gdy zdarzenie osiągnie element, zostaną wyzwolone wszystkie programy obsługi powiązane z tym typem zdarzenia dla elementu. Jeśli jest zarejestrowanych wiele programów obsługi, będą one zawsze wykonywane w kolejności, w jakiej zostały powiązane. Po wykonaniu wszystkich programów obsługi zdarzenie jest kontynuowane wzdłuż normalnej ścieżki propagacji zdarzenia.

Wzywani są obaj handlowcy.

Możesz myśleć o wbudowanym wiązaniu zdarzeń (np. "onclick=..."), Gdzie dużą wadą jest tylko jeden moduł obsługi, który może być ustawiony dla zdarzenia.

jQuery jest zgodny z modelem rejestracji zdarzeń DOM Level 2 :

Model DOM Event Model umożliwia rejestrację wielu detektorów zdarzeń w jednym EventTarget. Aby to osiągnąć, detektory zdarzeń nie są już przechowywane jako wartości atrybutów

Udało się to z powodzeniem przy użyciu dwóch metod: enkapsulacji Stephan202 i wielu detektorów zdarzeń. Mam 3 zakładki wyszukiwania, zdefiniujmy ich identyfikatory tekstu wejściowego w tablicy:

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

Gdy zawartość searchtab1 się zmieni, chcę zaktualizować searchtab2 i searchtab3. Zrobiłem to w ten sposób do hermetyzacji:

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

Wielu detektorów zdarzeń:

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

Obie metody mi się podobają, ale programista wybrał enkapsulację, jednak działało również wiele odbiorników zdarzeń. Użyliśmy Chrome, aby to przetestować.

Istnieje obejście, które gwarantuje, że jedna procedura obsługi będzie występować po drugiej: dołącz drugą procedurę obsługi do elementu zawierającego i pozwól, aby zdarzenie się pojawiło. W module obsługi dołączonym do kontenera możesz spojrzeć na event.target i zrobić coś, jeśli to ten, który Cię interesuje.

Być może surowe, ale zdecydowanie powinno działać.

jquery wykona oba programy obsługi, ponieważ zezwala na wiele programów obsługi zdarzeń. Stworzyłem przykładowy kod. Możesz tego spróbować

próbny