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

Es hängt davon ab, wie die Ereignisse verbunden sind. Zur Veranschaulichung nehme wir haben die folgenden click-handler:

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

Wir gehen, zu befestigen Sie es an unserem element, mit unterschiedlichen Methoden, von denen einige erlauben die Inspektion und einige, die nicht.

Methode A) single event-handler

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

Methode B) mehrere event-Handler

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 die handler innerhalb eines Objekts)

  //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.data und jQuery.data)}

Methode D): Prototyp (messy)

$(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 1.6.0.3, inklusive (sehr schwierig hier)

  //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!') }"
  })

InformationsquelleAutor der Antwort Crescent Fresh

WebKit Inspector in Chrome oder Safari-Browser jetzt tut. Es zeigt die Ereignis-Listener für ein DOM-element, wenn Sie es auswählen, in den Elemente-Bereich.

InformationsquelleAutor der Antwort Ishan

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

Beim Debuggen, wenn Sie nur wollen, um zu sehen, die events, die ich empfehlen entweder...

1. Visual Event
2. Die Elemente Abschnitt der Chrome Developer Tools: wählen Sie ein element aus und suchen Sie nach "Ereignis-Listener" auf der rechten unteren Ecke (ähnlich wie in Firefox)

Wenn Sie möchten, verwenden Sie die Ereignisse in Ihrem code, und Sie sind mit jQuery vor version 1.8die Sie verwenden können:

$(selector).data("events")

Ereignisse. Ab version 1.8 verwenden .Daten("Ereignisse") ist eingestellt (siehe dieser bug ticket). Sie verwenden können:

$._data(element, "events")

Weiteres Beispiel: Schreiben Sie alle click-events auf einem bestimmten link zu der Konsole:

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

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

Leider mit $._data dies wird nicht empfohlen, außer zum Debuggen, da es sich um eine interne jQuery-Struktur, und könnte sich in zukünftigen Versionen ändern. Leider kenne ich keine anderen einfachen Mittel der Zugriff auf die Ereignisse.

InformationsquelleAutor der Antwort Luke

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

2: können Sie überschreiben Element.addEventListener zu erinnern, die zusätzlichen Hörer (praktische Eigenschaft EventListenerList war entfernt von DOM3 spec-Vorschlag). Führen Sie diesen code vor jedem Fall angebracht ist:

(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, überschreiben Element.removeEventListener entfernen Sie die Falle aus dem benutzerdefinierten Element.eventListenerList.

3: Element.onclick Eigenschaft benötigt eine Besondere Pflege-hier:

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

4: vergessen Sie nicht die Element.onclick content-Attribut: dies sind zwei verschiedene Dinge:

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

So müssen Sie es zu handhaben, zu:

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

Visual Event-bookmarklet (erwähnt in der beliebteste Antwort) nur Stiehlt die benutzerdefinierte Bibliothek von handler-cache:

Es stellt sich heraus, dass es keine standard-Methode der W3C
empfohlen DOM-Schnittstelle, um herauszufinden, was die Ereignis-Listener sind
befestigt an einem bestimmten element. Während dies erscheinen mag, um eine
Aufsicht, es war ein Vorschlag, eine Eigenschaft, die man als
eventListenerList zu den Stufe-3-DOM-Spezifikation, wurde aber
leider entfernt wurde in späteren Entwürfen. Als solche sind wir gezwungen,
schaute auf die einzelnen Javascript-Bibliotheken, die in der Regel
pflegen Sie einen cache von angefügte Ereignisse (so können Sie später entfernt werden und
andere nützliche Abstraktionen).

Als solche, um für Visual Event zu show-Veranstaltungen, es muss in der Lage sein zu
analysieren die event-Informationen aus einer Javascript-Bibliothek.

Element überschreiben kann ist fraglich (d.h., da gibt es einige DOM-spezifische Funktionen wie live-Kollektionen, die nicht codiert werden, in JS), aber es gibt die eventListenerList nativ unterstützen und es funktioniert in Chrome, Firefox und Opera (funktioniert nicht im IE7).

InformationsquelleAutor der Antwort Jan Turoň

Den Firefox developer tools jetzt tut. Ereignisse werden angezeigt, indem Sie auf die "ev" - Taste auf der rechten Seite jedes Elements anzuzeigen, einschließlich jQuery und DOM Veranstaltungen.

InformationsquelleAutor der Antwort simonzack

Opera 12 (nicht die neueste Chrome Webkit-engine basiert) Dragonfly hatte dieses für eine Weile und ist natürlich angezeigt, in der DOM-Struktur. Meiner Meinung nach ist es ein superior-debugger und das ist der einzige Grund, übrigen, warum ich immer noch mit Opera 12 version (es gibt keine v13, v14-version und die v15 Webkit-basierten fehlt Libelle noch)

InformationsquelleAutor der Antwort Daniel Sokolowski

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

InformationsquelleAutor der Antwort Ronald Lewis Berner II

War ich vor kurzem die Arbeit mit Ereignissen und wollten view/control alle Ereignisse auf einer Seite. Angeschaut möglichen Lösungen, habe ich beschlossen, zu gehen meine eigene Weise, und erstellen Sie eine benutzerdefinierte system-monitor-Ereignisse. Also, ich habe drei Dinge.

Erste, ich brauchte ein container für alle Ereignis-Listener in die Seite: das ist dieEventListeners Objekt. Es hat drei nützliche Methoden: add()remove()und get().

Als Nächstes erstellte ich eine EventListener Objekt, um zu halten die notwendigen Informationen für die Veranstaltung, d.h.: targettypecallbackoptionsuseCapturewantsUntrustedund fügte hinzu, eine Methode remove() um den listener entfernen.

Schließlich erweiterte ich die native addEventListener() und removeEventListener() Methoden, um Ihnen die Arbeit mit den Objekten, die ich erstellt habe (EventListener und EventListeners).

Verwendung:

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

//bodyClickEvent.remove();

addEventListener() schafft eine EventListener - Objekt, fügt es zu EventListeners und gibt die EventListener Objekt, so kann es später entfernt werden.

EventListeners.get() können verwendet werden, um die Zuhörer in die Seite. Es akzeptiert eine EventTarget oder ein string (Ereignis-Typ).

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

Demo

Sagen wir, wir wollen wissen, jedes Ereignis-listener in diesem aktuellen Seite. Wir können es tun (vorausgesetzt, Sie verwenden ein Skript-manager-Erweiterung Tampermonkey in diesem Fall). Folgende Skript tut dies:

//==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 eine Liste aller, die Zuhörer, es sagt, es gibt 299 Ereignis-Listener. Es "scheint" zu sein, einige Dubletten, aber ich weiß nicht, ob Sie wirklich dupliziert. Nicht jeder event-Typ wird dupliziert, so dass all diese "Duplikate" könnten die einzelnen Hörers.

Code finden Sie in meinem repository. ich wollte nicht, dass es hier zu posten, weil es ziemlich lang ist.

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

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 die eigentliche callback. jQuery speichert die eigentlichen callback-in den Eigenschaften der EventTarget:

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

Entfernen Sie einen Ereignis-listener, der eigentliche callback übergeben werden muss, um die removeEventListener() Methode. Also, um diese Arbeit zu machen mit jQuery, es Bedarf einer weiteren Modifikation. Könnte ich lösen, in die Zukunft.

InformationsquelleAutor der Antwort akinuri