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

841

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.
Navneet
quelle
3
Wie hängen die Ereignisse überhaupt zusammen? Verwenden Sie eine Bibliothek (z. B. Prototype, jQuery usw.)?
Crescent Fresh
Es ist wichtig zu beachten, dass mehrere Rückruffunktionen für denselben Ereignistyp über angehängt werden können element.addEventListener(type, callback, [bubble]), während sie element.onclick = functionbei jeder Zuweisung überschrieben werden.
Braden Best

Antworten:

507

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.

Andrew Hedges
quelle
1
Perfekt! Beats Firebugs EventBugPlugin.
Robin Maben
22
Dadurch werden der Seite Millionen Elemente hinzugefügt, von denen viele Bilder sind. Die Nützlichkeit ist auf einer Seite mit vielen Ereignishandlern stark eingeschränkt (meine hat 17 KB und das Laden von Visual Event dauerte ca. 3 Minuten).
Tony R
15
Ich glaube, die erwähnte Chrome-Erweiterung @ssharma ist die hier verfügbare
kmote
1
Visial Event funktioniert nicht, wenn die Seite auf eine js-Bibliothek eines Drittanbieters verweist. Es wird ein Fehler ausgegeben : XMLHttpRequest kann A.com/js/jquery-ui-1.10.3.custom.js?_=1384831682813 nicht laden . Origin B.com ist von Access-Control-Allow-Origin nicht zulässig.
Hiway
5
Die internen Entwicklertools von Chrome und FF (F12) verfügen über eine integrierte Ereignisanzeige! Chrome:
Wählen Sie
365

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!') }"
    })
    
Halbmond frisch
quelle
3
Danke für die Aktualisierung. Es ist bedauerlich, dass Sie jeden Handlertyp durchlaufen müssen.
Keith Bentrup
4
Auf "Methode B" (addEventListener) finden Sie hier eine Antwort zum Status der Aufzählungsfunktionen für Handler, die mit der reinen DOM-Ereignis-API registriert sind: stackoverflow.com/questions/7810534/…
Nickolay,
@ John: Danke für den Kommentar. Sie haben ein Beispiel für "echtes JavaScript", um Listener abzurufen, die zuvor über hinzugefügt wurden addEventListener?
Crescent Fresh
6
@ Jan, dies scheint für jQuery 1.7.2 nicht zu funktionieren. Gibt es einen anderen Ansatz für diese Version?
Tomdemuyt
14
@tomdemuyt In jQuery werden Ereignisse jetzt in einem internen Datenarray gespeichert und sind nicht mehr .data('events')wie zuvor zugänglich . Verwenden Sie, um auf die internen Ereignisdaten zuzugreifen $._data(elem, 'events'). Beachten Sie, dass diese Funktion in der jQuery-Quelle als "nur für den internen Gebrauch" gekennzeichnet ist. Es gibt also keine Zusagen, dass sie in Zukunft immer funktionieren wird, aber ich glaube, dass sie seit jQuery 1.7 funktioniert und immer noch funktioniert.
Matt Browne
351

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

Raghav
quelle
1
+1. Browserspezifischer Code ist für mich kein Problem, da ich versuche, eine Seite, die ich nicht kontrolliere, ordnungsgemäß zu verwenden.
Grault
9
nett, funktioniert aber nur in der Kommandozeile der Chrome-Konsole :(
gillyspy
5
@ Raghav ah danke, die Verwendung ist NICHT: wie ich zuerst dachte :)getEventListeners(object) obj getEventListeners()
jave.web
11
Sie hätten mir 3 Stunden sparen können, wenn Sie erklärt hätten, wie Sie den Quellcode eines Ereignislisteners erhalten. Diese "Referenz" erklärte nichts. Für den Fall, dass jemand anderes einen Verlust hatte, gehen Sie wie folgt vor : var list = getEventListeners(document.getElementById("YOURIDHERE")); console.log(list["focus"][0]["listener"].toString()). Ändern Sie "Fokus" auf das Ereignis, das Sie überprüfen möchten, und die Nummer, wenn sich mehrere Listener auf demselben Ereignis befinden.
doABarrelRoll721
46
TIPP: getEventListeners($0)Ruft die Ereignis-Listener für das Element ab, auf das Sie sich in den Chrome-Entwicklungstools konzentriert haben. Ich benutze das die ganze Zeit. Ich liebe es, nicht querySelector oder get__By_ Funktionen verwenden zu müssen
Cacoder
91

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.

Ishan
quelle
9
Ich bin nicht sicher, ob alle Ereignishandler angezeigt werden. nur der einzelne HTML-Ereignishandler.
Huyz
3
Ich sollte das EventBug-Plugin für Firebug der Vollständigkeit halber erwähnen < softwareishard.com/blog/category/eventbug >
Nickolay
Dies war gerade mein Tag, einige ältere Prototyp-Codes hatten mehrere Funktionen, die an dasselbe Ereignis auf demselben Element gebunden waren, und ich wollte unbedingt versuchen, sie aufzuspüren. Vielen Dank Ishan.
Siliconrockstar
70

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.

Ivan Castellanos
quelle
4
Diese Methode funktioniert nicht, wenn Sie ein Benutzerskript oder ein Inhaltsskript schreiben. Es ist heutzutage nicht nur wahrscheinlich, dass Sandboxen vorhanden sind, sondern wie können Sie die Reihenfolge der Ausführung garantieren?
Huyz
Diese Methode funktioniert mit Chrome / 19 und FF / 12. Die Reihenfolge der Ausführung kann garantiert werden, wenn Sie dies vor anderen Skripten
einbinden
8
Könnten Sie nicht einfach Node.prototypestattdessen ändern ? Dort HTMLAnchorElementerbt .addEventListenersowieso. '
Esailija
3
Sie gehen davon aus, dass der Benutzeragent die Vererbung von Prototypen für DOM-Hostobjekte implementiert und Sie diese ändern können. Keine dieser Ideen ist gut: Ändern Sie keine Objekte, die Sie nicht besitzen .
RobG
1
Dies ist ziemlich nutzlos - es zeigt, welche eventListener hinzugefügt wurden, was in einigen Fällen gut sein kann, aber nicht, was entfernt wurde. Wenn Sie also versuchen zu debuggen, was entfernt wurde und was nicht, gibt es einfach keine Möglichkeit.
Gotofritz
52

Verwenden Sie getEventListeners in Google Chrome :

getEventListeners(document.getElementByID('btnlogin'));
getEventListeners($('#btnlogin'));
Pranay Soni
quelle
1
Nicht gefangener Referenzfehler: getEventListeners ist nicht definiert
Bryan Grace
3
getEventListeners funktioniert nur in der devtools-Konsole von Chrome. Und dies ist ein Duplikat dieser ausführlicheren Antwort: stackoverflow.com/a/16544813/1026
Nickolay
41

(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.

Luke
quelle
1
$._data(elem, "events")scheint nicht mit jQuery 1.10 zu funktionieren, zumindest für Ereignisse, die mit registriert wurden $(elem).on('event', ...). Weiß jemand, wie man diese debuggt?
Marius Gedminas
4
Ich bin nicht positiv, aber ich denke, der erste Parameter von muss $._datamöglicherweise ein Element und kein jQuery-Objekt sein. Also muss ich mein Beispiel oben console.log($._data($myLink[0], "events").click);
Luke
29

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 ).

Jan Turoň
quelle
23

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

Jon z
quelle
Bitte korrigieren Sie mich, wenn ich falsch liege, aber ist es nicht nur für Event-Listener, die an das Fenster angehängt sind?
Maciej Krawczyk
@ MaciejKrawczyk yep, und diejenigen, die sprudeln
Jon z
18

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.

Screenshot der Ereignis-Listener-Schaltfläche der Firefox-Entwicklertools auf der Registerkarte "Inspektor"

Simonzack
quelle
Ich habe mir eines der dom-Elemente auf der Seite angesehen, auf der das Visual Event 2-Lesezeichen ein Ereignis anzeigt, mit dem eine Verbindung besteht, und ich habe die kleine Schaltfläche "ev" rechts gesehen, wie Sie zeigen.
Eric
Der Ereignis-Listener von Firefox könnte von jQuery delegierte Ereignisse herausfinden, während Chrome dazu ein Plugin benötigt.
Nick Tsai
12

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);
Michael Butler
quelle
9
Neue Funktion in Firebug
Javier Constanzo
10

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

n00b
quelle
3
Dies ist eine nette Antwort, aber ich kann sie nicht dazu bringen, an den bodyund document-Elementen zu arbeiten.
David Bradshaw
Wirklich schöne Lösung!
Dzhakhar Ukhaev
@ Peter Mortensen, warum hast du Jan's Namen geändert? :)
n00b
1
@ David Bradshaw: weil Körper, Dokument und Fenster ihren eigenen Prototyp haben und nicht den Element-Prototyp ...
Stefan Steiger
1
@ n00b: Es gibt einen Fehler. Deshalb hmmm. Sie verwenden den Kommaoperator in der if-Anweisung für Listener und useCaption ... Der Kommaoperator wertet jeden seiner Operanden (von links nach rechts) aus und gibt den Wert des letzten Operanden zurück. Sie entfernen also den ersten eventListener, der in useCapture übereinstimmt, unabhängig vom Typ des Ereignisses ... Das sollte && anstelle von Komma sein.
Stefan Steiger
8

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).

Geben Sie hier die Bildbeschreibung ein

Daniel Sokolowski
quelle
4

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];
}
Ronald
quelle
4

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.

Screenshot der Konsole mit allen Ereignis-Listenern auf dieser Seite

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

Geben Sie hier die Bildbeschreibung ein

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.

Akinuri
quelle
Funktioniert super! Danke
mt025
3

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>

Joel Barba
quelle
1

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"));
Aiden Waterman
quelle