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:
Event.observe ;addEventListener ;element.onclick .
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 nur die $._data()-Funktionen in meinem Fall 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>
Ich habe kürzlich mit Ereignissen gearbeitet und wollte alle Ereignisse auf einer Seite anzeigen/kontrollieren. Nachdem ich mir mögliche Lösungen angesehen hatte, beschloss ich, meinen eigenen Weg zu gehen und ein benutzerdefiniertes System zur Überwachung von Ereignissen zu erstellen. Ich habe also drei Dinge getan.
Zuerst brauchte ich einen Container für alle Ereignis-Listener auf der Seite: das ist die EventListeners Objekt. Es hat drei nützliche Methoden: add() , remove() et get() .
Als nächstes habe ich eine EventListener Objekt, das die notwendigen Informationen für das Ereignis enthält, d.h.: target , type , callback , options , useCapture , wantsUntrusted und fügte eine Methode remove() um den Hörer zu entfernen.
Schließlich habe ich die native addEventListener() y removeEventListener() Methoden, damit sie mit den von mir erstellten Objekten funktionieren ( EventListener y EventListeners ).
Verwendung:
var bodyClickEvent = document.body.addEventListener("click", function () {
console.log("body click");
});
// bodyClickEvent.remove();addEventListener() erstellt eine EventListener Objekt, fügt es zu EventListeners EventListener Objekt, so dass es später entfernt werden kann.
EventListeners.get() kann verwendet werden, um die Zuhörer auf der Seite anzuzeigen. Sie akzeptiert eine EventTarget oder eine Zeichenkette (Ereignistyp).
// EventListeners.get(document.body);
// EventListeners.get("click");Demo
Nehmen wir an, wir wollen alle Ereignis-Listener auf der aktuellen Seite kennen. Das können wir tun (vorausgesetzt, Sie verwenden eine Skriptmanager-Erweiterung, in diesem Fall Tampermonkey). Das 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 alle Zuhörer auflisten, gibt es 299 Ereigniszuhörer. Es "scheint" einige Duplikate zu geben, aber ich weiß nicht, ob sie wirklich Duplikate sind. Nicht jeder Ereignistyp wird dupliziert, so dass alle diese "Duplikate" ein einzelner Zuhörer sein könnten.
Den Code finden Sie auf meiner Repository. Ich wollte ihn hier nicht posten, weil er ziemlich lang ist.
Aktualisierung: Das scheint mit jQuery nicht zu funktionieren. Wenn ich den EventListener untersuche, sehe ich, dass der Callback ist
function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}Ich glaube, dies gehört zu jQuery, und ist nicht der eigentliche Rückruf. jQuery speichert den eigentlichen Rückruf in den Eigenschaften des EventTarget:
$(document.body).click(function () {
console.log("jquery click");
});
Um einen Ereignis-Listener zu entfernen, muss der aktuelle Callback an die removeEventListener() Methode. Damit dies mit jQuery funktioniert, sind also weitere Änderungen erforderlich. Ich könnte das in Zukunft beheben.
Es gibt schöne jQuery Events Erweiterung :
(Thema Quelle )
Wenn Sie diese Funktionen ändern, können Sie die hinzugefügten Hörer protokollieren:
EventTarget.prototype.addEventListener
EventTarget.prototype.attachEvent
EventTarget.prototype.removeEventListener
EventTarget.prototype.detachEventlesen Sie den Rest der Hörer mit
console.log(someElement.onclick);
console.log(someElement.getAttribute("onclick")); CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
4 Stimmen
Wie werden die Ereignisse überhaupt miteinander verbunden? Verwenden Sie eine Bibliothek (z. B. Prototype, jQuery, etc.)?
0 Stimmen
Es ist wichtig zu beachten, dass mehrere Callback-Funktionen für denselben Ereignistyp über
element.addEventListener(type, callback, [bubble]), währendelement.onclick = functionwird bei jeder Zuweisung überschrieben.6 Stimmen
Ruft alle Ereignisse neben ihrem jeweiligen Element ab:
Array.from(document.querySelectorAll("*")).forEach(e => { const ev = getEventListeners(e); if (Object.keys(ev).length !== 0) {console.log(e, ev)} })0 Stimmen
Sie können die
addEventListenerund erfassen eine Liste aller Zuhörer im DOM-Element. Hier ein Beispielcode stackoverflow.com/a/64484951/1812732