wake-up-neo.com

jQuery: mehrere Handler für dasselbe Ereignis

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

Zum Beispiel:

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

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

128
flybywire

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 .

157
Russ Cam

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

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

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

35
Stephan202

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

Wenn ein Ereignis ein Element erreicht, werden alle Handler an dieses Ereignis gebunden. Typ für das Element werden ausgelöst. Wenn mehrere Handler vorhanden sind registriert, werden sie immer in der Reihenfolge ausgeführt, in der sie .__ waren. gebunden. Nachdem alle Handler ausgeführt wurden, wird das Ereignis entlang der .__ fortgesetzt. Normaler Weiterleitungspfad für Ereignisse.

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

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

17
allicarn

Sie sollten die Verkettung verwenden können, um die Ereignisse 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 unten stehende Code macht das gleiche

$('#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 an dieses Ereignis gebunden. Typ für das Element werden ausgelöst. Wenn mehrere Handler vorhanden sind registriert, werden sie immer in der Reihenfolge ausgeführt, in der sie .__ waren. gebunden. Nachdem alle Handler ausgeführt wurden, wird das Ereignis entlang der .__ fortgesetzt. Normaler Weiterleitungspfad für Ereignisse.

9
anddoutoi

Beide Handler werden angerufen.

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

jQuery entspricht dem Ereignisregistrierungsmodell DOM Level 2 :

Das DOM-Ereignismodell ermöglicht Registrierung mehrerer Veranstaltungen Listener auf ein einzelnes EventTarget. Zu Um dies zu erreichen, gibt es keine Ereignis-Listener länger als Attributwerte gespeichert

2
Crescent Fresh

Erfolgte die Arbeit mit den beiden Methoden: Stephan202's Encapsulation und Multiple Event Listener. Ich habe 3 Suchregisterkarten, definieren wir ihre 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. Hab es so für die Kapselung 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 entschied sich für die Kapselung, jedoch funktionierten auch mehrere Ereignis-Listener. Wir haben Chrome verwendet, um es zu testen.

2
GeneralElektrix

Es gibt eine Problemumgehung, um sicherzustellen, dass ein Handler nach dem anderen ausgeführt wird: Bringen Sie den zweiten Handler an ein enthaltendes Element an und lassen Sie das Ereignis aufblähen. Im Handler, der an den Container angehängt ist, können Sie event.target anzeigen und etwas tun, wenn es das ist, an dem Sie interessiert sind.

Crude vielleicht, aber es sollte auf jeden Fall funktionieren.

1
David

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

Demo

0
Vikram Rajput