Hvordan finne hendelseslyttere på en DOM-node ved feilsøking eller fra JavaScript-koden?

Hvis du bare trenger å se hva som skjer på en side, kan du prøve bokmerket Visuell hendelse.

Oppdatering: Visuell hendelse 2 tilgjengelig;

Det avhenger av hvordan hendelsene er festet. For illustrasjon antar vi at vi har følgende klikkbehandler:

var handler = function() { alert('clicked!') };

Vi skal knytte den til elementet vårt ved hjelp av forskjellige metoder, noen som tillater inspeksjon og noen som ikke gjør det.

Metode A) enkelt hendelsesbehandler

element.onclick = handler;
// inspect
alert(element.onclick); // alerts "function() { alert('clicked!') }"

Metode B) flere hendelsesbehandlere

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

Metode C): jQuery

$(element).click(handler);

• 1.3.x

   // inspect
   var clickEvents = $(element).data("events").click;
   jQuery.each(clickEvents, function(nøkkel, verdi) {
       alert(value) // varsler "function() { alert('klikket!') }"
   })

• 1.4.x (lagrer handleren inne i et objekt)

   // inspect
   var clickEvents = $(element).data("events").click;
   jQuery.each(clickEvents, function(key, handlerObj) {
       alert(handlerObj.handler) // varsler "function() { alert('klikket!') }"
       // også tilgjengelig: handlerObj.type, handlerObj.namespace
   })

(Se jQuery.fn.data og jQuery.data)

Metode D): Prototype (rotete)

$(element).observe('click', handler);

• 1.5.x

   // inspect
   Event.observators.each(function(element) {
       if(element[0] == element) {
           alert(element[2]) // varsler "function() { alert('klikket!') }"
       }
   })

• 1.6 til og med 1.6.0.3 (ble veldig vanskelig her)

   // inspect. "_eventId" er for < 1.6.0.3 mens
   // "_prototypeEventID " ble introdusert i 1.6.0.3
   var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click;
   clickEvents.each(function(wrapper){
       alert(wrapper.handler) // varsler "function() { alert('klikket!') }"
   })

• 1.6.1 (litt bedre)

   // inspect
   var clickEvents = element.getStorage().get('prototype_event_registry').get('click');
   clickEvents.each(function(wrapper){
       alert(wrapper.handler) // varsler "function() { alert('klikket!') }"
   })

Hvis du har Firebug, kan du bruke console.dir(object or array) for å skrive ut et fint tre i konsoll-loggen for en hvilken som helst JavaScript skalar, array eller objekt.

Prøv:

console.dir(clickEvents);

eller

console.dir(window);