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
.Wenn Sie nur überprüfen wollen, was auf einer Seite passiert, können Sie das Visual Event Bookmarklet verwenden.
Aktualisieren: Visual Event 2 verfügbar;
Es hängt davon ab, wie die Ereignisse angehängt sind. Zur Veranschaulichung nehmen wir an, wir haben den folgenden Click-Handler:
var handler = function() { alert('clicked!') };
Wir werden ihn mit verschiedenen Methoden an unser Element anhängen, von denen einige eine Überprüfung erlauben und andere nicht.
Methode A) Einzelner Event-Handler
element.onclick = handler;
// inspect
alert(element.onclick); // alerts "function() { alert('clicked!') }"
Methode B) mehrere Ereignisbehandler
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
// inspizieren
var clickEvents = $(element).data("events").click;
jQuery.each(clickEvents, function(Schlüssel, Wert) {
alert(value) // alarmiert "function() { alert('clicked!') }"
})
1.4.x (speichert den Handler innerhalb eines Objekts)
// prüfen
var clickEvents = $(element).data("events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
alert(handlerObj.handler) // alerts "function() { alert('clicked!') }"
// auch verfügbar: handlerObj.type, handlerObj.namespace
})
(Siehe jQuery.fn.data
und jQuery.data
)
Methode D): Prototyp (unordentlich)
$(element).observe('click', handler);
1.5.x
// inspizieren
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 (hier wurde es sehr schwierig)
// inspizieren. "_eventId" ist für < 1.6.0.3 während
// "_prototypeEventID" wurde in 1.6.0.3 eingeführt
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)
// inspizieren
var clickEvents = element.getStorage().get('prototype_event_registry').get('click');
clickEvents.each(function(wrapper){
alert(wrapper.handler) // alerts "function() { alert('clicked!') }"
})
Wenn Sie Firebug haben, können Sie console.dir(object or array)
verwenden, um einen schönen Baum im Konsolenprotokoll eines beliebigen JavaScript-Skalars, -Arrays oder -Objekts auszugeben.
Versuchen Sie es:
console.dir(clickEvents);
oder
console.dir(window);