Kann ich mit jQuery Ereignisse finden, die an ein Element gebunden sind?

355

Ich binde zwei Ereignishandler an diesen Link:

<a href='#' id='elm'>Show Alert</a>

JavaScript:

$(function()
{
  $('#elm').click(_f);
  $('#elm').mouseover(_m);
});

function _f(){alert('clicked');}
function _m(){alert('mouse over');}

Gibt es eine Möglichkeit, eine Liste aller Ereignisse zu erhalten, die an ein Element gebunden sind, in diesem Fall an ein Element mit id="elm"?

Praveen Prasad
quelle

Antworten:

517

In modernen Versionen von jQuery würden Sie die $._dataMethode verwenden, um alle Ereignisse zu finden, die von jQuery an das betreffende Element angehängt wurden. Beachten Sie , dass dies nur für den internen Gebrauch gilt:

// Bind up a couple of event handlers
$("#foo").on({
    click: function(){ alert("Hello") },
    mouseout: function(){ alert("World") }
});

// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );

Das Ergebnis von $._dataist ein Objekt, das beide von uns festgelegten Ereignisse enthält (siehe Abbildung unten mit mouseouterweiterter Eigenschaft):

Konsolenausgabe für $ ._

In Chrome können Sie dann mit der rechten Maustaste auf die Handlerfunktion klicken und auf "Funktionsdefinition anzeigen" klicken, um die genaue Stelle anzuzeigen, an der sie in Ihrem Code definiert ist.

Sampson
quelle
59
Dies funktioniert nur für Elemente, die über die jQuery-Helfer gebunden sind.
Alex Ciminian
3
@jammypeach Ich versuche Ihre Lösung, werde aber immer noch undefiniert für den Selektor zurückgegeben. Ich habe $ ('# elem') verwendet. Bind ('click', function () {}); wenn das einen Unterschied machen würde.
Marcus
6
@ marcus ahhh, woops ich habe etwas verpasst, sorry :) $._data(element[0], ‘events’);
totalNotLizards
16
Heutzutage muss man verwenden: $ ._ data ($ ('# foo') [0]) .events
Donald Taylor
5
$._data()wird von JQuery intern verwendet. $.data()ist die öffentliche Methode für den Benutzer. Und $.data(element, 'events')funktioniert gut.
Diashowp2
73

Allgemeiner Fall:

  • Schlagen F12 , um Dev Tools zu öffnen
  • Drücke den Sources Registerkarte
  • Scrollen Sie auf der rechten Seite nach unten zu Event Listener Breakpoints und erweitern Sie den Baum
  • Klicken Sie auf die Ereignisse, auf die Sie hören möchten.
  • Interagiere mit dem Zielelement. Wenn es ausgelöst wird, erhältst du einen Haltepunkt im Debugger

Ebenso können Sie:

  • Rechtsklick auf die Zielelement -> auswählen "Inspect element "
  • Scrollen Sie auf der rechten Seite des Entwicklungsrahmens nach unten. Unten ist 'event listeners '.
  • Erweitern Sie den Baum, um zu sehen, welche Ereignisse an das Element angehängt sind. Ich bin mir nicht sicher, ob dies für Ereignisse funktioniert, die durch Sprudeln behandelt werden (ich vermute nicht).
Vali Shah
quelle
3
Ich bin damit einverstanden, dass dies die bevorzugte Methode ist und eine universelle Lösung darstellt, anstatt sich auf jQuery zu verlassen, das möglicherweise verfügbar ist oder nicht.
Deadbabykitten
3
@dead umm ... die Frage bezieht sich speziell auf jQuery und verwendet jQuery im Beispielanhang - die Antwort sollte nur im Kontext von jQuery (?) gültig sein
Code Jockey
3
Es ist hilfreich, Antworten auch in anderen Kontexten zu verstehen. Nur weil jemand eine bestimmte Frage stellt, bedeutet dies nicht, dass die eingeschränkte Antwort die beste ist, die es gibt. Besonders bei jQuery verlassen sich die Leute eher darauf als Krücke. Das Verständnis der zugrunde liegenden Architektur ist wichtig. Diese Antwort zeigt, dass jQuery nicht unbedingt erforderlich ist. Die Frage und das Beispiel sind zu vage, um die Verwendung zu kennen, und lassen daher Interpretationen offen, was als gültige Antwort angesehen werden könnte.
Deadbabykitten
12

Ich füge dies für die Nachwelt hinzu; Es gibt einen einfacheren Weg, bei dem nicht mehr JS geschrieben wird. Verwenden des erstaunlichen Firebug-Addons für Firefox ,

  1. Klicken Sie mit der rechten Maustaste auf das Element und wählen Sie "Element mit Firebug untersuchen".
  2. Navigieren Sie in den Seitenleistenfenstern (im Screenshot gezeigt) mit dem winzigen Pfeil> zur Registerkarte Ereignisse
  3. Auf der Registerkarte Ereignisse werden die Ereignisse und die entsprechenden Funktionen für jedes Ereignis angezeigt
  4. Der Text daneben zeigt den Funktionsort

Geben Sie hier die Bildbeschreibung ein

Kakoma
quelle
1
Dies ist auch in IE-Entwicklungstools verfügbar.
Devlin Carnate
9

Mit der Javascript-Funktion getEventListeners () können Sie jetzt einfach eine Liste der an ein Objekt gebundenen Ereignis-Listener abrufen.

Geben Sie beispielsweise Folgendes in die Konsole der Entwicklertools ein:

// Get all event listners bound to the document object
getEventListeners(document);
ScottyG
quelle
4
Ich denke, das ist keine native Funktion und benötigt das folgende Skript / die folgende Abhängigkeit: github.com/colxi/getEventListeners Dies sollte der Antwort hinzugefügt werden, da es sonst irreführend ist. Aber danke, dass du mich zu diesem 'Plugin' gebracht hast. sieht gut aus. :)
Dennis98
6

Mit dem Plugin für das jQuery Audit-Plugin sollten Sie dies über die normalen Chrome Dev Tools tun können. Es ist nicht perfekt, aber es sollte Ihnen ermöglichen, den tatsächlichen Handler zu sehen, der an das Element / Ereignis gebunden ist, und nicht nur den generischen jQuery-Handler.

JohnK
quelle
3

Während dies nicht genau für jQuery-Selektoren / -Objekte spezifisch ist, können Sie in FireFox Quantum 58.x mithilfe der Dev-Tools Ereignishandler für ein Element finden:

  1. Klicken Sie mit der rechten Maustaste auf das Element
  2. Klicken Sie im Kontextmenü auf "Element überprüfen".
  3. Wenn sich neben dem Element (gelbes Kästchen) ein 'ev'-Symbol befindet, klicken Sie auf das' ev'-Symbol
  4. Zeigt alle Ereignisse für dieses Element und den Ereignishandler an

FF Quantum Dev Tools

Chris22
quelle
1
tolle Antwort, vor allem der Screenshot macht es viel einfacher. Vielen Dank für die Mühe!
Bizi
2

Ich habe so etwas verwendet, wenn ($ ._ data ($ ("a.wine-item-link") [0]). Events == null) {... etwas tun, ihre Ereignishandler so ziemlich wieder binden}, um es zu überprüfen wenn mein Element an ein Ereignis gebunden ist. Es wird weiterhin undefined (null) angezeigt, wenn Sie alle Event-Handler von diesem Element getrennt haben. Das ist der Grund, warum ich dies in einem if-Ausdruck bewerte.

Adrian Liew
quelle
2

Beachten Sie, dass Ereignisse möglicherweise an das Dokument selbst und nicht an das betreffende Element angehängt werden. In diesem Fall möchten Sie Folgendes verwenden:

$._data( $(document)[0], "events" );

Und finden Sie das Ereignis mit der richtigen Auswahl :

Geben Sie hier die Bildbeschreibung ein

Und dann schauen Sie sich den Handler an > [[FunctionLocation]]

Geben Sie hier die Bildbeschreibung ein

Pikamander2
quelle
0

Wenn ich eine kleine komplexe DOM-Abfrage an $ ._-Daten wie folgt übergebe: $._data($('#outerWrap .innerWrap ul li:last a'), 'events')wird in der Browserkonsole undefiniert ausgelöst .

Also musste ich $ ._ Daten für das übergeordnete div verwenden: $._data($('#outerWrap')[0], 'events')um die Ereignisse für die a-Tags zu sehen. Hier ist eine JSFiddle für dasselbe: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/

giri-jeedigunta
quelle
3
Der Grund dafür ist, dass Sie das Ereignis von delegieren $('#outerWrap'). Die Ereignisse sind tatsächlich an dieses Element gebunden und nicht an die einzelnen Anker.
Scottux