Überprüfen Sie die angehängten Ereignishandler auf DOM-Elemente

Gibt es eine Möglichkeit anzuzeigen, welche Funktionen / Codes an ein Ereignis für ein DOM-Element angehängt sind? Verwenden von Firebug oder einem anderen Tool.

Event-Handler, die mit herkömmlichem element.onclick= handleroder HTML angehängt wurden, <element onclick="handler">können trivial aus der element.onclickEigenschaft aus dem Skript oder dem In-Debugger abgerufen werden .

Ereignishandler, die mit DOM Level 2-Ereignismethoden addEventListenerund IE angehängt wurden, attachEventkönnen derzeit überhaupt nicht aus dem Skript abgerufen werden. DOM Level 3 hat einmal vorgeschlagen element.eventListenerList, alle Hörer zu erreichen, aber es ist unklar, ob dies die endgültige Spezifikation erreicht. Es gibt heute keine Implementierung in einem Browser.

Ein Debugging-Tool als Browser-Erweiterung könnte Zugriff auf diese Art von Listenern erhalten, aber mir sind keine bekannt, die dies tatsächlich tun.

Einige JS-Frameworks hinterlassen genügend Aufzeichnungen über Ereignisbindungen, um herauszufinden, was sie vorhaben. Visual Event verwendet diesen Ansatz, um Listener zu ermitteln, die über einige beliebte Frameworks registriert wurden.

Das Elements Panel in den Google Chrome Developer Tools hat dies seit Chrome-Versionen Mitte 2011 und Chrome Developer Channel-Versionen seit 2010.

Außerdem werden die für den ausgewählten Knoten angezeigten Ereignis-Listener in der Reihenfolge angezeigt , in der sie während der Erfassungs- und Blasenphase ausgelöst werden.

Drücken Sie command+ option++ iunter Mac OSX und Ctrl+ Shift+ iunter Windows, um dies in Chrome zu starten

Chrome Dev Tools hat kürzlich einige neue Tools zur Überwachung von JavaScript-Ereignissen angekündigt .

TL; DR

Hören Sie Ereignisse eines bestimmten Typs mit monitorEvents().

Verwenden Sie unmonitorEvents()diese Option , um das Hören zu beenden.

Holen Sie sich Listener eines DOM-Elements mit getEventListeners().

Verwenden Sie das Inspektorfenster für Ereignislistener, um Informationen zu Ereignislistenern abzurufen.

Benutzerdefinierte Ereignisse suchen

Für meine Notwendigkeit, benutzerdefinierte JS-Ereignisse im Code von Drittanbietern zu entdecken, waren die folgenden zwei Versionen von getEventListeners()erstaunlich hilfreich.

• getEventListeners(window)
• getEventListeners(document)

Wenn Sie wissen, an welchen DOM-Knoten der Ereignis-Listener angehängt wurde, übergeben Sie diesen anstelle von windowoder document.

Bekanntes Ereignis

Wenn Sie wissen, welches Ereignis Sie z. B. clickim Dokumententext überwachen möchten, können Sie Folgendes verwenden : monitorEvents(document.body, 'click');.

Sie sollten jetzt alle Klickereignisse sehen document.body, die in der Konsole protokolliert werden.

Sie können direkt angehängte Ereignisse (element.onclick = Handler) anzeigen, indem Sie sich das DOM ansehen. Sie können an jQuery angehängte Ereignisse in Firefox mithilfe von FireBug mit FireQuery anzeigen. Es scheint keine Möglichkeit zu geben, von AddEventListener hinzugefügte Ereignisse mithilfe von FireBug anzuzeigen. Sie können sie jedoch in Chrome mithilfe des Chrome-Debuggers anzeigen.

Mit Visual Event von Allan Jardine können Sie alle derzeit angehängten Ereignishandler aus mehreren wichtigen JavaScript-Bibliotheken auf Ihrer Seite überprüfen. Es funktioniert mit jQuery, YUI und mehreren anderen.

Visual Event ist ein JavaScript-Lesezeichen und daher mit allen gängigen Browsern kompatibel.

Sie können Ihre Javascript-Umgebung erweitern, um den Überblick über Ereignis-Listener zu behalten. Umschließen (oder überladen) Sie die native addEventListener () -Methode mit einem Code, der alle von da an hinzugefügten Ereignis-Listener aufzeichnet . Sie müssten auch HTMLElement.prototype.removeEventListener erweitern, um Aufzeichnungen zu führen, die genau wiedergeben, was im DOM geschieht.

Nur zur Veranschaulichung (nicht getesteter Code) - Dies ist ein Beispiel dafür, wie Sie addEventListener "umschließen" würden, um Datensätze der registrierten Ereignis-Listener auf dem Objekt selbst zu haben:

var nativeMethod = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function (type, listener) {
   var el = e.currentTarget;
   if(!(el.eventListeners instanceof Array)) { el.eventListeners = []}
   el.eventListeners.push({'type':type, 'listener':listener});
   nativeMethod.call(el, type, listener);
}