31

Wenn eine Seite DOM Inspektion, würde ich das beigefügte Ereignis wissen, (s) ein Element schnellanbei/gebundene Ereignisse eines Element mit Chrome-Entwicklungstool/Firebug/IE Developer Toolbar

Zum Beispiel, wenn eine Taste hat diesen HTML-DOM

<button id="button1">Click Me</button> 

Und irgendwo (nicht an einem Ort, den ich im Voraus) ist es ein Ereignis hat angebracht, zB

$("#button1").click(function(){...}); 

Ich weiß, es programmatisch durchgeführt werden kann (Can I find events bound on an element with jQuery?)

aber ist es eine Möglichkeit, nur eine der Entwickler-Tools für Chrome/Firefox/IE mit einer Liste der Ereignisse zu sehen?


aktualisieren: Ich fand heraus, dass in den neueren Chrome-Versionen habe ich eine Registerkarte mit der Bezeichnung Ereignis-Listenern aber es scheint, ist es nicht leicht bohren läßt den ganzen Weg hinunter bis auf die Quelle des Ereignisses, wie jQuery die ursprüngliche

+0

Sie können sich [EventBug] (http://getfirebug.com/wiki/index.php/Firebug_Extensions#Eventbug) Firebug-Erweiterung ansehen. Allerdings weiß ich nicht, wie es in jQuery integriert ist. Aber im Allgemeinen ist die Unterstützung für Event-Listener in allen Dev-Tools leider nicht gut. –

Antwort

2

FireQuery Wraps - http://firequery.binaryage.com/ können Sie Ereignisse auf Elemente gebunden sehen und in der Registerkarte „Elemente“ und dann von der „Console“ Registerkarte können Sie

+4

Wenn es so etwas für chrome gibt (EventListeners, die einen Drilldown zur Quelle des Ereignisses machen), kannst du gerne einen Kommentar abgeben! –

+0

Diese Antwort muss nicht ausgewählt werden, es ist nicht für Chrom. –

18

Mit dem Chrome-Inspektor wählen Sie das Element in sie bohren siehe th e Ereignisse, die an das Element mit getEventListeners($0); angehängt sind.

+1

getEventListeners listet nur die Ereignisse auf, die an das Element selbst gebunden sind, und nicht alle Agentenereignisse von seinen Eltern. – diyism

+0

+1 für die Verwendung von $ 0 – ipd

+0

@ipd Was ist $ 0? – Shanimal

23

Es gibt jetzt einen Event Listeners Tab in Chrome. Event Listeners tab

+0

Beachten Sie, dass Sie auf dieser Registerkarte nach "Alle Knoten" oder "Nur ausgewählten Knoten" filtern können. – chipit24

+0

nutzlos, da alles auf jQuery verweist. Mit 'firefox developer edition' können Sie den richtigen Handler finden, der in meinem Fall eine Backbone-Ansicht ist. –

29

Um die ersten befestigten Handler auf dem ersten $ ("# button1") Element

$._data($("#button1").get(0),"events").click[0].handler 

JSFiddle

Die lange Geschichte zu bekommen, dass niemand hören will: Ich kam hier auf der Suche nach einem Plugin. Ich war begeistert, die Antwort von @schmidlop zu sehen, aber in jQuery gibt mir das nicht den Listener, nach dem ich suche, es zeigt nur den generischen Handler für jQuery-Ereignisse, die schließlich den spezifischen Callback aufrufen. Ich bin immer noch auf der Suche nach einem Chrome-Plugin, das es mir erlaubt, mit der rechten Maustaste auf ein Element zu klicken und mich in die Handler zu bohren, die an das Objekt angehängt sind.

Denn das wäre cool.

UPDATE: ich eine Chrome-Erweiterung gefunden jQuery Debugger genannt. Sie einfach „Inspect Element“ und „jQuery Ereignisse“ aus dem „Elemente“ Untermenü wählen ...https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimienter image description here

+1

'$ ._ data ($ (" # button1 "). Get (0)," events "). Klick [0] .handler' funktioniert super! –

+1

Das ist großartig ... sehr ideal, da ich kein Werkzeug brauche. Wenn der Event-Listener-Tab von Chrome dies tun könnte, wäre das großartig! –

3

Firefox-Entwickler-Tools nun eine „ev“ anzuzeigen neben Elementen, die Ereignisse gebunden hat. Dies kann verwendet werden, um gebundene Ereignisse (einschließlich jQuery-Ereignisse) zu überprüfen.Hier

ist ein Beispiel für Inspektion des "ersten Absatz" Element aus der jQuery click documentation:

Bound events in Firefox developer tools

0

Sie können auch von Visual Event-Addon für Chrome verfügbar überprüfen.

Verwandte Themen