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

Verwenden Sie getEventListeners in Google Chrome :

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

Answer 2

(Umschreiben der Antwort von diese Frage da es hier relevant ist.)

Wenn Sie beim Debuggen nur die Ereignisse sehen wollen, empfehle ich entweder...

1. Visuelles Ereignis
2. El Elemente in den Entwicklertools von Chrome: Wählen Sie ein Element aus und suchen Sie unten rechts nach "Event Listeners" (ähnlich in Firefox)

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

$(selector).data("events")

um die Ereignisse zu erhalten. Ab Version 1.8 wird die Verwendung von .data("events") nicht mehr angeboten. (siehe dieses Bug-Ticket ). Sie können verwenden:

$._data(element, "events")

Ein weiteres Beispiel: Schreiben Sie alle Klick-Ereignisse auf einen bestimmten Link in die Konsole:

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

(siehe http://jsfiddle.net/HmsQC/ für ein funktionierendes Beispiel)

Leider, Die Verwendung von $._data wird nicht empfohlen. außer zur Fehlersuche, da es sich um eine interne jQuery-Struktur handelt, die sich in zukünftigen Versionen ändern könnte. Leider kenne ich keine andere einfache Möglichkeit des Zugriffs auf die Ereignisse.

Answer 3

1: Prototype.observe verwendet Element.addEventListener (siehe den Quellcode )

2: Sie können Folgendes außer Kraft setzen Element.addEventListener um sich die hinzugefügten Hörer zu merken (praktische Eigenschaft EventListenerList wurde 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());
});

Und vergessen Sie nicht, die Funktion zu überschreiben Element.removeEventListener um das Ereignis aus der benutzerdefinierten Element.eventListenerList .

3: die Element.onclick Eigentum bedarf hier besonderer Sorgfalt:

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

4: Vergessen Sie nicht die Element.onclick Inhaltsattribut: Das sind zwei verschiedene Dinge:

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

Sie müssen also auch damit umgehen:

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

Das Visual Event-Bookmarklet (das in der meistgenannten Antwort erwähnt wird) stiehlt nur den Cache der benutzerdefinierten Bibliotheks-Handler:

Es hat sich herausgestellt, dass es keine Standardmethode des W3C gibt empfohlenen DOM-Schnittstelle gibt, um herauszufinden, welche Ereignis-Listener einem bestimmten Element zugeordnet sind. Während dies ein Versehen zu sein scheint Versehen zu sein scheint, gab es einen Vorschlag, eine Eigenschaft namens eventListenerList in die DOM-Spezifikation der Stufe 3 aufzunehmen, die aber wurde aber leider in späteren Entwürfen wieder entfernt. Daher sind wir gezwungen auf die einzelnen Javascript-Bibliotheken zu schauen, die typischerweise einen Zwischenspeicher für angehängte Ereignisse unterhalten (damit sie später entfernt werden können und andere nützliche Abstraktionen ausführen).

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

Element Overriding kann fragwürdig sein (z.B. weil es einige DOM-spezifische Features wie Live-Collections gibt, die nicht in JS kodiert werden können), aber es gibt die eventListenerList Unterstützung nativ und es funktioniert in Chrome, Firefox und Opera (funktioniert nicht in IE7).

Answer 4

In die Konsole einfügen, um alle eventListeners neben dem jeweiligen HTML-Element gedruckt

Array.from(document.querySelectorAll("*")).forEach(element => {
    const events = getEventListeners(element)
    if (Object.keys(events).length !== 0) {
         console.log(element, events)
    }
})

Answer 5

Sie können die nativen DOM-Methoden für die Verwaltung von Ereignis-Listenern einpacken, indem Sie dies an den Anfang Ihrer <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