Ho una pagina in cui alcuni ascoltatori di eventi sono collegati a caselle di input e di selezione. C'è un modo per scoprire quali ascoltatori di eventi stanno osservando un particolare nodo DOM e per quale evento?
Gli eventi sono collegati usando:
Event.observe
;addEventListener
;element.onclick
.Se hai solo bisogno di controllare cosa succede in una pagina, potresti provare il bookmarklet Visual Event.
Aggiornamento: Evento visivo 2 disponibile;
Dipende da come gli eventi sono collegati. Per esempio, supponiamo di avere il seguente gestore di click:
var handler = function() { alert('clicked!') };
Lo attaccheremo al nostro elemento usando diversi metodi, alcuni che permettono l'ispezione e altri no.
Metodo A) gestore di un singolo evento
element.onclick = handler;
// inspect
alert(element.onclick); // alerts "function() { alert('clicked!') }"
Metodo B) gestori di eventi multipli
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
Metodo C): jQuery
$(element).click(handler);
1.3.x
// ispeziona
var clickEvents = $(element).data("events").click;
jQuery.each(clickEvents, function(key, value) {
alert(valore) // avvisa "function() { alert('cliccato!') }"
})
1.4.x (memorizza il gestore all'interno di un oggetto)
// ispeziona
var clickEvents = $(element).data("events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
alert(handlerObj.handler) // alert "function() { alert('click!') }"
// disponibile anche: handlerObj.type, handlerObj.namespace
})
(Vedere jQuery.fn.data
e jQuery.data
);
Metodo D): Prototipo (disordinato)
$(element).observe('click', handler);
1.5.x
// ispezionare
Event.observers.each(function(item) {
if(item[0] == elemento) {
alert(item[2]) // alert "function() { alert('clicked!') }"
}
})
Da 1.6 a 1.6.0.3, incluso (è diventato molto difficile qui)
// controlla. "_eventId" è per < 1.6.0.3 mentre
// "_prototypeEventID" è stato introdotto in 1.6.0.3
var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click;
clickEvents.each(function(wrapper){
alert(wrapper.handler) // alert "function() { alert('click!') }"
})
1.6.1 (un po' meglio)
// ispeziona
var clickEvents = element.getStorage().get('prototype_event_registry').get('click');
clickEvents.each(function(wrapper){
alert(wrapper.handler) // alert "function() { alert('click!') }"
})
Se avete Firebug, potete usare console.dir(object or array)
per stampare un bell'albero nel log della console di qualsiasi scalare, array o oggetto JavaScript.
Provate:
console.dir(clickEvents);
o
console.dir(window);