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:
- Prototypen
Event.observe
; - DOMs
addEventListener
; - Als Elementattribut
element.onclick
.
javascript
events
dom
Navneet
quelle
quelle
element.addEventListener(type, callback, [bubble])
, während sieelement.onclick = function
bei jeder Zuweisung überschrieben werden.Antworten:
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.
quelle
EventBug
Plugin.Dies hängt davon ab, wie die Ereignisse angehängt sind. Zur Veranschaulichung nehmen wir an, dass wir den folgenden Klick-Handler haben:
Wir werden es mit verschiedenen Methoden an unser Element anhängen, von denen einige eine Inspektion ermöglichen und andere nicht.
Methode A) Einzelereignishandler
Methode B) mehrere Ereignishandler
Methode C): jQuery
1.3.x.
1.4.x (speichert den Handler in einem Objekt)
(Siehe
jQuery.fn.data
undjQuery.data
)Methode D): Prototyp (chaotisch)
1.5.x.
1,6 bis einschließlich 1.6.0.3 (wurde hier sehr schwierig)
1.6.1 (etwas besser)
quelle
addEventListener
?.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.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
quelle
getEventListeners(object)
obj getEventListeners()
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.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üssenWebKit 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.
quelle
Es ist möglich, alle Ereignis-Listener in JavaScript aufzulisten: Es ist nicht so schwer; Sie müssen nur die
prototype
Methode der HTML-Elemente hacken ( bevor Sie die Listener hinzufügen).Jetzt hat jedes Ankerelement (
a
) einelastListenerInfo
Eigenschaft, die alle Listener enthält. Und es funktioniert sogar zum Entfernen von Listenern mit anonymen Funktionen.quelle
Node.prototype
stattdessen ändern ? DortHTMLAnchorElement
erbt.addEventListener
sowieso. 'Verwenden Sie getEventListeners in Google Chrome :
quelle
(Umschreiben der Antwort auf diese Frage, da sie hier relevant ist.)
Wenn Sie beim Debuggen nur die Ereignisse sehen möchten, empfehle ich entweder ...
Wenn Sie die Ereignisse in Ihrem Code verwenden möchten und jQuery vor Version 1.8 verwenden , können Sie Folgendes verwenden:
um die Ereignisse zu bekommen. Ab Version 1.8 wird die Verwendung von .data ("Ereignisse") eingestellt (siehe dieses Bug-Ticket ). Sie können verwenden:
Ein weiteres Beispiel: Schreiben Sie alle Klickereignisse auf einen bestimmten Link zur Konsole:
( 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.
quelle
$._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?$._data
möglicherweise ein Element und kein jQuery-Objekt sein. Also muss ich mein Beispiel obenconsole.log($._data($myLink[0], "events").click);
1:
Prototype.observe
verwendet Element.addEventListener (siehe Quellcode )2: Sie können überschreiben,
Element.addEventListener
um sich an die hinzugefügten Listener zu erinnern (die praktische EigenschaftEventListenerList
wurde aus dem DOM3-Spezifikationsvorschlag entfernt). Führen Sie diesen Code aus, bevor ein Ereignis angehängt wird:Lesen Sie alle Veranstaltungen von:
Vergessen Sie nicht
Element.removeEventListener
, das Ereignis zu überschreiben , um es aus dem Benutzerdefinierten zu entfernenElement.eventListenerList
.3: Die
Element.onclick
Immobilie braucht hier besondere Pflege:4: Vergessen Sie nicht das
Element.onclick
Inhaltsattribut: Dies sind zwei verschiedene Dinge:Also müssen Sie auch damit umgehen:
Das Visual Event-Lesezeichen (in der beliebtesten Antwort erwähnt) stiehlt nur den benutzerdefinierten Bibliothekshandler-Cache:
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 ).
quelle
Sie können die nativen DOM-Methoden zum Verwalten von Ereignis-Listenern umschließen, indem Sie diese oben in Ihr Feld einfügen
<head>
:H / T @ les2
quelle
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.
quelle
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:
oder
quelle
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.)
Verwendungszweck:
someElement.getEventListeners([name])
- Liste der Ereignis-Listener zurückgeben, wenn name festgelegt ist, Array der Listener für dieses Ereignis zurückgebensomeElement.clearEventListeners([name])
- Entfernen Sie alle Ereignis-Listener. Wenn der Name festgelegt ist, entfernen Sie nur die Listener für dieses Ereignisquelle
body
unddocument
-Elementen zu arbeiten.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).
quelle
Prototyp 1.7.1 Weg
quelle
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
EventListeners
Objekt. Es verfügt über drei nützliche Methoden:add()
,remove()
, undget()
.Als nächstes habe ich eine
EventListener
Aufgabe , die notwendigen Informationen für die Veranstaltung zu halten, das heißt:target
,type
,callback
,options
,useCapture
,wantsUntrusted
, und ein Verfahren hinzugefügtremove()
entfernen Sie den Hörer.Zuletzt habe ich das Native
addEventListener()
und dieremoveEventListener()
Methoden erweitert, damit sie mit den von mir erstellten Objekten (EventListener
undEventListeners
) funktionieren .Verwendungszweck:
addEventListener()
Erstellt einEventListener
Objekt, fügt es hinzuEventListeners
und gibt dasEventListener
Objekt zurück, damit es später entfernt werden kann.EventListeners.get()
kann verwendet werden, um die Listener auf der Seite anzuzeigen. Es akzeptiert eineEventTarget
oder eine Zeichenfolge (Ereignistyp).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:
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
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:
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.quelle
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:
quelle
Es gibt eine nette jQuery Events-Erweiterung :
(Thema Quelle )
quelle
Durch Ändern dieser Funktionen können Sie die hinzugefügten Listener protokollieren:
Lesen Sie den Rest der Zuhörer mit
quelle