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

Question

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 auf ein Element gebunden zu erhalten, in diesem Fall auf Element mit id="elm" ?

Answer 1

In modernen Versionen von jQuery würden Sie die $._data Methode, um alle Ereignisse zu finden, die von jQuery an das betreffende Element angehängt wurden. Hinweis ist dies eine Methode, die nur für den internen Gebrauch bestimmt ist:

// 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 $._data wird ein Objekt sein, das beide Ereignisse enthält, die wir festgelegt haben (unten abgebildet mit dem mouseout Eigenschaft erweitert):

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

Answer 2

Allgemeiner Fall:

• Hit F12 zum Öffnen von Dev Tools
• Klicken Sie auf die Sources Registerkarte
• Scrollen Sie auf der rechten Seite nach unten zu Event Listener Breakpoints und Baum erweitern
• Klicken Sie auf die Ereignisse, die Sie abhören möchten.
• Interagieren Sie mit dem Zielelement, wenn sie feuern, erhalten Sie einen Haltepunkt im Debugger

Das können Sie auch:

• Rechtsklick auf den Zielelement -> wählen Sie " Inspect element "
• Scrollen Sie auf der rechten Seite des Dev-Frames nach unten, am unteren Rand steht ' event listeners '.
• Erweitern Sie die Baumstruktur, um zu sehen, welche Ereignisse mit dem Element verbunden sind. Nicht sicher, ob dies für Ereignisse, die durch Blasenbildung behandelt werden, funktioniert (ich vermute nicht)

Answer 3

Sie können nun einfach eine Liste der an ein Objekt gebundenen Ereignis-Listener erhalten, indem Sie die Javascript-Funktion getEventListeners() verwenden.

Geben Sie zum Beispiel Folgendes in die Dev-Tools-Konsole ein:

// Get all event listners bound to the document object
getEventListeners(document);

Answer 4

Ich füge dies für die Nachwelt hinzu; Es gibt einen einfacheren Weg, der nicht das Schreiben von mehr JS beinhaltet. Die Verwendung der erstaunliches Firebug Addon für Firefox ,

1. Klicken Sie mit der rechten Maustaste auf das Element und wählen Sie "Element mit Firebug inspizieren".
2. Navigieren Sie in der Seitenleiste (siehe Screenshot) mit dem kleinen Pfeil > zur Registerkarte Ereignisse
3. Die Registerkarte Ereignisse zeigt die Ereignisse und die entsprechenden Funktionen für jedes Ereignis an
4. Der Text daneben zeigt den Ort der Funktion an

Answer 5

Die jQuery Audit-Plugin Plugin sollten Sie dies über die normalen Chrome Dev Tools tun können. Es ist nicht perfekt, aber es sollte Sie die tatsächliche Handler gebunden, um das Element/Ereignis und nicht nur die generische jQuery Handler sehen.