Wie kann ich Ereignisse anzeigen, die für ein Element in Chrome DevTools ausgelöst wurden?

Ich habe ein anpassbares Formularelement auf einer Seite aus einer Bibliothek. Ich möchte sehen, welche Javascript-Ereignisse ausgelöst werden, wenn ich mit ihnen interagiere, weil ich herausfinden möchte, welcher Ereignishandler verwendet werden soll.

Wie mache ich das mit Chrome Web Developer?

• Drücken Sie F12, um Dev Tools zu öffnen
• Klicken Sie auf die Registerkarte Quellen
• 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 mit der rechten Maustaste auf das Zielelement klicken -> "Element untersuchen" auswählen. Scrollen Sie auf der rechten Seite des Entwicklungsrahmens nach unten. Unten befindet sich "Ereignis-Listener". 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).

Sie können die Funktion monitorEvents verwenden.

Überprüfen Sie einfach Ihr Element ( right mouse click→ Inspectauf dem sichtbaren Element oder gehen Sie Elementsin den Chrome Developer Tools zur Registerkarte und wählen Sie das gewünschte Element aus). Gehen Sie dann zur ConsoleRegisterkarte und schreiben Sie:

monitorEvents($0)

Wenn Sie nun mit der Maus über dieses Element fahren, es fokussieren oder darauf klicken, wird der Name des ausgelösten Ereignisses mit seinen Daten angezeigt.

Um diese Daten nicht mehr abzurufen, schreiben Sie dies einfach in die Konsole:

unmonitorEvents($0)

$0ist nur das letzte von den Chrome Developer Tools ausgewählte DOM-Element. Sie können dort jedes andere DOM-Objekt übergeben (z. B. Ergebnis von getElementByIdoder querySelector).

Sie können auch den Ereignistyp "Typ" als zweiten Parameter angeben, um überwachte Ereignisse auf einen vordefinierten Satz zu beschränken. Zum Beispiel:

monitorEvents(document.body, 'mouse')

Eine Liste dieser verfügbaren Typen finden Sie hier .

Ich habe ein kleines GIF erstellt, das zeigt, wie diese Funktion funktioniert:

Visual Event ist ein nettes kleines Lesezeichen, mit dem Sie die Ereignishandler eines Elements anzeigen können. Die Online-Demo kann hier angesehen werden .

Für jQuery (mindestens Version 1.11.2) hat das folgende Verfahren für mich funktioniert.

1. Klicken Sie mit der rechten Maustaste auf das Element und öffnen Sie "Chrome Developer Tools".
2. Geben Sie $._data(($0), 'events');die 'Konsole' ein
3. Erweitern Sie die angehängten Objekte und doppelklicken Sie auf den handler:Wert.
4. Hier wird der Quellcode der angehängten Funktion angezeigt. Suchen Sie auf der Registerkarte "Suchen" nach einem Teil davon.

Und es ist Zeit aufzuhören, das Rad neu zu erfinden und Vanilla JS-Events zu verwenden ... :)

Dies zeigt keine benutzerdefinierten Ereignisse an, wie sie Ihr Skript möglicherweise erstellt, wenn es sich um ein JQuery-Plugin handelt. beispielsweise :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

Das Ereignisfenster unter "Skripte" in Chrome-Entwicklertools zeigt nicht "Etwas: Benutzerdefiniertes Ereignis Eins" an.