Wie finde ich Ereignis-Listener auf einem DOM-Knoten beim Debuggen oder aus dem JavaScript-Code?

Ich habe eine Seite, auf der einige Ereignis-Listener an Eingabefelder und Auswahlfelder angehängt sind. Gibt es eine Möglichkeit herauszufinden, welche Ereignis-Listener einen bestimmten DOM-Knoten beobachten und für welches Ereignis?

Ereignisse werden angehängt mit:

1. Prototypen Event.observe ;
2. DOMs addEventListener;
3. Als Elementattribut element.onclick.

Wenn Sie nur überprüfen müssen, was auf einer Seite passiert, können Sie das Visual Event- Lesezeichen verwenden.

Update : Visual Event 2 verfügbar.

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

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

Wir werden es mit verschiedenen Methoden an unser Element anhängen, von denen einige eine Inspektion ermöglichen und andere nicht.

Methode A) Einzelereignishandler

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

Methode B) mehrere Ereignishandler

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) {
      alert(value) // alerts "function() { alert('clicked!') }"
  })
  

• 1.4.x (speichert den Handler in einem Objekt)

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

^{(Siehe jQuery.fn.dataund jQuery.data)}

Methode D): Prototyp (chaotisch)

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

• 1.5.x.

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

• 1,6 bis einschließlich 1.6.0.3 (wurde hier 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){
      alert(wrapper.handler) // alerts "function() { alert('clicked!') }"
  })
  

• 1.6.1 (etwas besser)

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

Chrome, Firefox, Vivaldi und Safari unterstützen getEventListeners(domElement)die Developer Tools-Konsole.

Für die meisten Debugging-Zwecke könnte dies verwendet werden.

Im Folgenden finden Sie eine sehr gute Referenz zur Verwendung: https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners

WebKit Inspector in Chrome- oder Safari-Browsern erledigt dies jetzt. Die Ereignis-Listener für ein DOM-Element werden angezeigt, wenn Sie es im Bereich Elemente auswählen.

Es ist möglich, alle Ereignis-Listener in JavaScript aufzulisten: Es ist nicht so schwer; Sie müssen nur die prototypeMethode der HTML-Elemente hacken ( bevor Sie die Listener hinzufügen).

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});
};

Jetzt hat jedes Ankerelement ( a) eine lastListenerInfoEigenschaft, die alle Listener enthält. Und es funktioniert sogar zum Entfernen von Listenern mit anonymen Funktionen.

Verwenden Sie getEventListeners in Google Chrome :

getEventListeners(document.getElementByID('btnlogin'));
getEventListeners($('#btnlogin'));

(Umschreiben der Antwort auf diese Frage, da sie hier relevant ist.)

Wenn Sie beim Debuggen nur die Ereignisse sehen möchten, empfehle ich entweder ...

1. Visuelles Ereignis
2. Der Abschnitt " Elemente " der Chrome-Entwicklertools: Wählen Sie ein Element aus und suchen Sie unten rechts nach "Ereignis-Listenern" (ähnlich in Firefox).

Wenn Sie die Ereignisse in Ihrem Code verwenden möchten und jQuery vor Version 1.8 verwenden , können Sie Folgendes verwenden:

$(selector).data("events")

um die Ereignisse zu bekommen. Ab Version 1.8 wird die Verwendung von .data ("Ereignisse") eingestellt (siehe dieses Bug-Ticket ). Sie können verwenden:

$._data(element, "events")

Ein weiteres Beispiel: Schreiben Sie alle Klickereignisse auf einen bestimmten Link zur Konsole:

var $myLink = $('a.myClass');
console.log($._data($myLink[0], "events").click);

( Ein funktionierendes Beispiel finden Sie unter http://jsfiddle.net/HmsQC/. )

Leider wird die Verwendung von $ ._-Daten nur zum Debuggen empfohlen, da es sich um eine interne jQuery-Struktur handelt, die sich in zukünftigen Versionen ändern kann. Leider kenne ich keine andere einfache Möglichkeit, auf die Veranstaltungen zuzugreifen.

1: Prototype.observeverwendet Element.addEventListener (siehe Quellcode )

2: Sie können überschreiben, Element.addEventListenerum sich an die hinzugefügten Listener zu erinnern (die praktische Eigenschaft EventListenerListwurde aus dem DOM3-Spezifikationsvorschlag entfernt). Führen Sie diesen Code aus, bevor ein Ereignis angehängt wird:

(function() {
  Element.prototype._addEventListener = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function(a,b,c) {
    this._addEventListener(a,b,c);
    if(!this.eventListenerList) this.eventListenerList = {};
    if(!this.eventListenerList[a]) this.eventListenerList[a] = [];
    this.eventListenerList[a].push(b);
  };
})();

Lesen Sie alle Veranstaltungen von:

var clicks = someElement.eventListenerList.click;
if(clicks) clicks.forEach(function(f) {
  alert("I listen to this function: "+f.toString());
});

Vergessen Sie nicht Element.removeEventListener, das Ereignis zu überschreiben , um es aus dem Benutzerdefinierten zu entfernen Element.eventListenerList.

3: Die Element.onclickImmobilie braucht hier besondere Pflege:

if(someElement.onclick)
  alert("I also listen tho this: "+someElement.onclick.toString());

4: Vergessen Sie nicht das Element.onclickInhaltsattribut: Dies sind zwei verschiedene Dinge:

someElement.onclick = someHandler; // IDL attribute
someElement.setAttribute("onclick","otherHandler(event)"); // content attribute

Also müssen Sie auch damit umgehen:

var click = someElement.getAttribute("onclick");
if(click) alert("I even listen to this: "+click);

Das Visual Event-Lesezeichen (in der beliebtesten Antwort erwähnt) stiehlt nur den benutzerdefinierten Bibliothekshandler-Cache:

Es stellt sich heraus, dass die von W3C empfohlene DOM-Schnittstelle keine Standardmethode bereitstellt, um herauszufinden, welche Ereignis-Listener an ein bestimmtes Element angehängt sind. Dies scheint zwar ein Versehen zu sein, es wurde jedoch vorgeschlagen, eine Eigenschaft namens eventListenerList in die DOM-Spezifikation der Ebene 3 aufzunehmen, die jedoch in späteren Entwürfen leider entfernt wurde. Daher müssen wir uns die einzelnen Javascript-Bibliotheken ansehen, die normalerweise einen Cache mit angehängten Ereignissen verwalten (damit sie später entfernt werden und andere nützliche Abstraktionen ausführen können).

Damit Visual Event Ereignisse anzeigen kann, muss es in der Lage sein, die Ereignisinformationen aus einer Javascript-Bibliothek zu analysieren.

Das Überschreiben von Elementen kann fraglich sein (dh weil es einige DOM-spezifische Funktionen wie Live-Sammlungen gibt, die in JS nicht codiert werden können), aber es bietet die eventListenerList-Unterstützung nativ und funktioniert in Chrome, Firefox und Opera (funktioniert nicht in IE7 ).

Sie können die nativen DOM-Methoden zum Verwalten von Ereignis-Listenern umschließen, indem Sie diese oben in Ihr Feld einfügen <head>:

<script>
    (function(w){
        var originalAdd = w.addEventListener;
        w.addEventListener = function(){
            // add your own stuff here to debug
            return originalAdd.apply(this, arguments);
        };

        var originalRemove = w.removeEventListener;
        w.removeEventListener = function(){
            // add your own stuff here to debug
            return originalRemove.apply(this, arguments);
        };
    })(window);
</script>

H / T @ les2

Die Firefox-Entwicklertools tun dies jetzt. Ereignisse werden angezeigt, indem Sie auf die Schaltfläche "ev" rechts neben der Anzeige jedes Elements klicken, einschließlich jQuery- und DOM- Ereignisse.

Wenn Sie über Firebug verfügen , können Sie console.dir(object or array)einen schönen Baum im Konsolenprotokoll eines beliebigen JavaScript-Skalars, -Arrays oder -Objekts drucken.

Versuchen:

console.dir(clickEvents);

oder

console.dir(window);

Voll funktionsfähige Lösung basierend auf der Antwort von Jan Turon - verhält sich wie getEventListeners()von der Konsole aus:

(Es gibt einen kleinen Fehler mit Duplikaten. Es bricht sowieso nicht viel.)

(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];
  };
})();

Verwendungszweck:

someElement.getEventListeners([name]) - Liste der Ereignis-Listener zurückgeben, wenn name festgelegt ist, Array der Listener für dieses Ereignis zurückgeben

someElement.clearEventListeners([name]) - Entfernen Sie alle Ereignis-Listener. Wenn der Name festgelegt ist, entfernen Sie nur die Listener für dieses Ereignis

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

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];
}

Ich habe kürzlich mit Ereignissen gearbeitet und wollte alle Ereignisse auf einer Seite anzeigen / steuern. Nachdem ich mir mögliche Lösungen angesehen habe, habe ich beschlossen, meinen eigenen Weg zu gehen und ein benutzerdefiniertes System zur Überwachung von Ereignissen zu erstellen. Also habe ich drei Dinge getan.

Zuerst brauchte ich einen Container für alle Ereignis-Listener auf der Seite: das ist das EventListenersObjekt. Es verfügt über drei nützliche Methoden: add(), remove(), und get().

Als nächstes habe ich eine EventListenerAufgabe , die notwendigen Informationen für die Veranstaltung zu halten, das heißt: target, type, callback, options, useCapture, wantsUntrusted, und ein Verfahren hinzugefügt remove()entfernen Sie den Hörer.

Zuletzt habe ich das Native addEventListener()und die removeEventListener()Methoden erweitert, damit sie mit den von mir erstellten Objekten ( EventListenerund EventListeners) funktionieren .

Verwendungszweck:

var bodyClickEvent = document.body.addEventListener("click", function () {
    console.log("body click");
});

// bodyClickEvent.remove();

addEventListener()Erstellt ein EventListenerObjekt, fügt es hinzu EventListenersund gibt das EventListenerObjekt zurück, damit es später entfernt werden kann.

EventListeners.get()kann verwendet werden, um die Listener auf der Seite anzuzeigen. Es akzeptiert eine EventTargetoder eine Zeichenfolge (Ereignistyp).

// EventListeners.get(document.body);
// EventListeners.get("click");

Demo

Angenommen, wir möchten jeden Ereignis-Listener auf dieser aktuellen Seite kennenlernen. Wir können das tun (vorausgesetzt, Sie verwenden eine Skriptmanager-Erweiterung, in diesem Fall Tampermonkey). Das folgende Skript führt dies aus:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      https://stackoverflow.com/*
// @grant        none
// ==/UserScript==

(function() {
    fetch("https://raw.githubusercontent.com/akinuri/js-lib/master/EventListener.js")
        .then(function (response) {
            return response.text();
        })
        .then(function (text) {
            eval(text);
            window.EventListeners = EventListeners;
        });
})(window);

Und wenn wir alle Listener auflisten, heißt es, dass es 299 Event-Listener gibt. Es "scheint" einige Duplikate zu geben, aber ich weiß nicht, ob es sich wirklich um Duplikate handelt. Nicht jeder Ereignistyp ist dupliziert, daher können alle diese "Duplikate" ein einzelner Listener sein.

Code finden Sie in meinem Repository. Ich wollte es hier nicht posten, weil es ziemlich lang ist.

Update: Dies scheint mit jQuery nicht zu funktionieren. Wenn ich den EventListener untersuche, sehe ich, dass der Rückruf ist

function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}

Ich glaube, das gehört zu jQuery und ist nicht der eigentliche Rückruf. jQuery speichert den tatsächlichen Rückruf in den Eigenschaften des EventTargets:

$(document.body).click(function () {
    console.log("jquery click");
});

Um einen Ereignis-Listener zu entfernen, muss der eigentliche Rückruf an die removeEventListener()Methode übergeben werden. Damit dies mit jQuery funktioniert, müssen weitere Änderungen vorgenommen werden. Ich könnte das in Zukunft beheben.

Ich versuche das in jQuery 2.1 zu tun, und mit der " $().click() -> $(element).data("events").click;" -Methode funktioniert es nicht.

Ich habe festgestellt, dass in meinem Fall nur die Funktionen $ ._ data () funktionieren:

	$(document).ready(function(){

		var node = $('body');
		
        // Bind 3 events to body click
		node.click(function(e) { alert('hello');  })
			.click(function(e) { alert('bye');  })
			.click(fun_1);

        // Inspect the events of body
		var events = $._data(node[0], "events").click;
		var ev1 = events[0].handler // -> function(e) { alert('hello')
		var ev2 = events[1].handler // -> function(e) { alert('bye')
		var ev3 = events[2].handler // -> function fun_1()
        
		$('body')
			.append('<p> Event1 = ' + eval(ev1).toString() + '</p>')
			.append('<p> Event2 = ' + eval(ev2).toString() + '</p>')
			.append('<p> Event3 = ' + eval(ev3).toString() + '</p>');        
	
	});

	function fun_1() {
		var txt = 'text del missatge';	 
		alert(txt);
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
</body>

Es gibt eine nette jQuery Events-Erweiterung :

(Thema Quelle )

Durch Ändern dieser Funktionen können Sie die hinzugefügten Listener protokollieren:

EventTarget.prototype.addEventListener
EventTarget.prototype.attachEvent
EventTarget.prototype.removeEventListener
EventTarget.prototype.detachEvent

Lesen Sie den Rest der Zuhörer mit

console.log(someElement.onclick);
console.log(someElement.getAttribute("onclick"));