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

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"?

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):

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.

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).

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

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);

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.

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

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.

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 :

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

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/