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

Die Firefox-Entwicklerwerkzeuge können dies jetzt. Ereignisse werden angezeigt, indem Sie auf die Schaltfläche "ev" auf der rechten Seite der Anzeige eines jeden Elements klicken, einschließlich jQuery y DOM Veranstaltungen.

Answer 2

Vollständig funktionierende Lösung auf der Grundlage von Antwort von Jan Turon - verhält sich wie getEventListeners() von der Konsole aus:

(Es gibt einen kleinen Fehler mit Duplikaten, der aber nicht viel kaputt macht).

(function() {
  Element.prototype._addEventListener = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function(a,b,c) {
    if(c==undefined)
      c=false;
    this._addEventListener(a,b,c);
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(!this.eventListenerList[a])
      this.eventListenerList[a] = [];
    //this.removeEventListener(a,b,c); // TODO - handle duplicates..
    this.eventListenerList[a].push({listener:b,useCapture:c});
  };

  Element.prototype.getEventListeners = function(a){
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(a==undefined)
      return this.eventListenerList;
    return this.eventListenerList[a];
  };
  Element.prototype.clearEventListeners = function(a){
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(a==undefined){
      for(var x in (this.getEventListeners())) this.clearEventListeners(x);
        return;
    }
    var el = this.getEventListeners(a);
    if(el==undefined)
      return;
    for(var i = el.length - 1; i >= 0; --i) {
      var ev = el[i];
      this.removeEventListener(a, ev.listener, ev.useCapture);
    }
  };

  Element.prototype._removeEventListener = Element.prototype.removeEventListener;
  Element.prototype.removeEventListener = function(a,b,c) {
    if(c==undefined)
      c=false;
    this._removeEventListener(a,b,c);
      if(!this.eventListenerList)
        this.eventListenerList = {};
      if(!this.eventListenerList[a])
        this.eventListenerList[a] = [];

      // Find the event in the list
      for(var i=0;i<this.eventListenerList[a].length;i++){
          if(this.eventListenerList[a][i].listener==b, this.eventListenerList[a][i].useCapture==c){ // Hmm..
              this.eventListenerList[a].splice(i, 1);
              break;
          }
      }
    if(this.eventListenerList[a].length==0)
      delete this.eventListenerList[a];
  };
})();

Verwendung:

someElement.getEventListeners([name]) - Rückgabe der Liste der Ereignis-Listener, wenn Name gesetzt ist, Rückgabe des Arrays der Listener für dieses Ereignis

someElement.clearEventListeners([name]) - alle Ereignis-Listener entfernen, wenn Name gesetzt ist, nur Listener für dieses Ereignis entfernen

Answer 3

Wenn Sie eine Firebug können Sie verwenden console.dir(object or array) um im Konsolenprotokoll einen schönen Baum eines beliebigen JavaScript-Skalars, -Arrays oder -Objekts auszugeben.

Versuchen Sie es:

console.dir(clickEvents);

oder

console.dir(window);

Answer 4

Opera 12 (nicht die neueste, auf Chrome Webkit basierende Engine) Libelle hat dies schon eine Weile und wird offensichtlich in der DOM-Struktur angezeigt. Meiner Meinung nach ist es ein überlegener Debugger und ist der einzige Grund, warum ich immer noch die auf Opera 12 basierende Version benutze (es gibt keine v13, v14 Version und der v15 Webkit basierenden fehlt noch Dragonfly)

Answer 5

Prototyp 1.7.1 Weg

function get_element_registry(element) {
    var cache = Event.cache;
    if(element === window) return 0;
    if(typeof element._prototypeUID === 'undefined') {
        element._prototypeUID = Element.Storage.UID++;
    }
    var uid =  element._prototypeUID;           
    if(!cache[uid]) cache[uid] = {element: element};
    return cache[uid];
}