Wie findet man Ereignis-Listener auf einem DOM-Knoten in JavaScript oder beim Debuggen?

Question

Ich habe eine Seite, auf der einige Ereignis-Listener mit Eingabe- und Auswahlfeldern verbunden sind. Gibt es eine Möglichkeit, herauszufinden, welche Ereignis-Listener einen bestimmten DOM-Knoten beobachten und für welches Ereignis?

Ereignisse werden mit angehängt:

1. Der Prototyp Event.observe ;
2. DOM's addEventListener ;
3. Als Element-Attribut element.onclick .

Answer 1

Unterstützung für Chrome, Firefox, Vivaldi und Safari getEventListeners(domElement) in ihrer Developer Tools-Konsole.

Für die meisten Debugging-Zwecke kann dies verwendet werden.

Nachfolgend finden Sie eine sehr gute Referenz für die Verwendung dieses Instruments: https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners

Answer 2

Wenn Sie nur überprüfen wollen, was auf einer Seite passiert, können Sie die Visuelles Ereignis bookmarklet.

Update : Visuelles Ereignis 2 verfügbar.

Answer 3

Es hängt davon ab, wie die Ereignisse angehängt sind. Zur Veranschaulichung nehmen wir an, wir haben den folgenden Click-Handler:

var handler = function() { alert('clicked!') };

Wir werden sie mit verschiedenen Methoden an unserem Element anbringen, von denen einige eine Überprüfung erlauben und andere nicht.

Methode A) Einzelner Ereignisbehandler

element.onclick = handler;
// inspect
console.log(element.onclick); // "function() { alert('clicked!') }"

Methode B) mehrere Ereignisbehandler

if(element.addEventListener) { // DOM standard
    element.addEventListener('click', handler, false)
} else if(element.attachEvent) { // IE
    element.attachEvent('onclick', handler)
}
// cannot inspect element to find handlers

Methode C): jQuery

$(element).click(handler);

• 1.3.x

   // inspect
   var clickEvents = $(element).data("events").click;
   jQuery.each(clickEvents, function(key, value) {
       console.log(value) // "function() { alert('clicked!') }"
   })

• 1.4.x (speichert den Handler innerhalb eines Objekts)

   // inspect
   var clickEvents = $(element).data("events").click;
   jQuery.each(clickEvents, function(key, handlerObj) {
       console.log(handlerObj.handler) // "function() { alert('clicked!') }"
       // also available: handlerObj.type, handlerObj.namespace
   })

• 1.7+ (sehr gut)

  Hergestellt unter Verwendung von Wissen aus dieser Kommentar .

   events = $._data(this, 'events');
   for (type in events) {
     events[type].forEach(function (event) {
       console.log(event['handler']);
     });
   }

(Siehe jQuery.fn.data y jQuery.data )

Methode D): Prototyp (unordentlich)

$(element).observe('click', handler);

• 1.5.x

   // inspect
   Event.observers.each(function(item) {
       if(item[0] == element) {
           console.log(item[2]) // "function() { alert('clicked!') }"
       }
   })

• 1.6 bis einschließlich 1.6.0.3 (hier wurde es sehr schwierig)

   // inspect. "_eventId" is for < 1.6.0.3 while 
   // "_prototypeEventID" was introduced in 1.6.0.3
   var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click;
   clickEvents.each(function(wrapper){
       console.log(wrapper.handler) // "function() { alert('clicked!') }"
   })

• 1.6.1 (etwas besser)

   // inspect
   var clickEvents = element.getStorage().get('prototype_event_registry').get('click');
   clickEvents.each(function(wrapper){
       console.log(wrapper.handler) // "function() { alert('clicked!') }"
   })

Wenn Sie auf die resultierende Ausgabe in der Konsole klicken (die den Text der Funktion anzeigt), navigiert die Konsole direkt zu der Zeile der Funktionsdeklaration in der entsprechenden JS-Datei.

Answer 4

WebKit Inspector in den Browsern Chrome und Safari tut dies jetzt. Er zeigt die Ereignis-Listener für ein DOM-Element an, wenn Sie es im Fensterbereich Elemente auswählen.

Answer 5

Es ist möglich, alle Ereignis-Listener aufzulisten in JavaScript: Es ist gar nicht so schwer; man muss nur die prototype Methode der HTML-Elemente ( vor Hinzufügen der Hörer).

function reportIn(e){
    var a = this.lastListenerInfo[this.lastListenerInfo.length-1];
    console.log(a)
}

HTMLAnchorElement.prototype.realAddEventListener = HTMLAnchorElement.prototype.addEventListener;

HTMLAnchorElement.prototype.addEventListener = function(a,b,c){
    this.realAddEventListener(a,reportIn,c); 
    this.realAddEventListener(a,b,c); 
    if(!this.lastListenerInfo){  this.lastListenerInfo = new Array()};
    this.lastListenerInfo.push({a : a, b : b , c : c});
};

Nun wird jedes Ankerelement ( a ) wird eine lastListenerInfo Eigenschaft, die alle Zuhörer enthält. Und es funktioniert sogar für das Entfernen von Zuhörern mit anonymen Funktionen.