jQuery: Mehr als ein Handler für dasselbe Ereignis

Was passiert, wenn ich zwei Ereignishandler für dasselbe Element an dasselbe Ereignis binde?

Beispielsweise:

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

"Gewinnt" der letzte Handler oder werden beide Handler ausgeführt?

Beide Handler werden ausgeführt. Das jQuery-Ereignismodell ermöglicht mehrere Handler für ein Element. Daher überschreibt ein späterer Handler einen älteren Handler nicht.

Die Handler werden in der Reihenfolge ausgeführt, in der sie gebunden wurden .

Angenommen, Sie haben zwei Handler, f und g , und möchten sicherstellen, dass sie in einer bekannten und festen Reihenfolge ausgeführt werden, und kapseln sie dann einfach:

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

Auf diese Weise gibt es (aus Sicht von jQuery) nur einen Handler, der f und g in der angegebenen Reihenfolge aufruft .

.bind () von jQuery wird in der Reihenfolge ausgelöst, in der es gebunden war :

Wenn ein Ereignis ein Element erreicht, werden alle Handler ausgelöst, die an diesen Ereignistyp für das Element gebunden sind. Wenn mehrere Handler registriert sind, werden sie immer in der Reihenfolge ausgeführt, in der sie gebunden wurden. Nachdem alle Handler ausgeführt wurden, wird das Ereignis auf dem normalen Ereignisausbreitungspfad fortgesetzt.

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

Da die anderen Funktionen von jQuery (z. .click()B.) Verknüpfungen sind .bind('click', handler), würde ich vermuten, dass sie auch in der Reihenfolge ausgelöst werden, in der sie gebunden sind.

Sie sollten in der Lage sein, die Ereignisse mithilfe der Verkettung nacheinander auszuführen, z. B.:

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

Ich denke, der folgende Code macht dasselbe

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

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

TFM sagt auch:

Wenn ein Ereignis ein Element erreicht, werden alle Handler ausgelöst, die an diesen Ereignistyp für das Element gebunden sind. Wenn mehrere Handler registriert sind, werden sie immer in der Reihenfolge ausgeführt, in der sie gebunden wurden. Nachdem alle Handler ausgeführt wurden, wird das Ereignis auf dem normalen Ereignisausbreitungspfad fortgesetzt.

Beide Handler werden gerufen.

Möglicherweise denken Sie an eine Inline-Ereignisbindung (z. B. "onclick=..."), bei der ein großer Nachteil darin besteht, dass nur ein Handler für ein Ereignis festgelegt werden kann.

jQuery entspricht dem DOM Level 2-Ereignisregistrierungsmodell :

Das DOM-Ereignismodell ermöglicht die Registrierung mehrerer Ereignis-Listener auf einem einzelnen EventTarget. Um dies zu erreichen, werden Ereignis-Listener nicht mehr als Attributwerte gespeichert

Mit den beiden Methoden erfolgreich funktioniert: Stephan202s Kapselung und mehrere Ereignis-Listener. Ich habe 3 Suchregisterkarten. Definieren wir deren Eingabetext-IDs in einem Array:

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

Wenn sich der Inhalt von searchtab1 ändert, möchte ich searchtab2 und searchtab3 aktualisieren. Haben Sie es für die Kapselung so gemacht:

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

Mehrere Ereignis-Listener:

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

Ich mag beide Methoden, aber der Programmierer hat die Kapselung gewählt, jedoch haben auch mehrere Ereignis-Listener funktioniert. Wir haben Chrome verwendet, um es zu testen.

Es gibt eine Problemumgehung, um sicherzustellen, dass ein Handler nach dem anderen ausgeführt wird: Fügen Sie den zweiten Handler einem enthaltenden Element hinzu und lassen Sie das Ereignis in die Luft sprudeln. In dem an den Container angehängten Handler können Sie event.target anzeigen und etwas tun, wenn es das ist, an dem Sie interessiert sind.

Roh vielleicht, aber es sollte definitiv funktionieren.

jquery führt beide Handler aus, da mehrere Ereignishandler zulässig sind. Ich habe Beispielcode erstellt. Du kannst es versuchen

Demo