Kako najti poslušalce dogodkov v vozlišču DOM pri odpravljanju napak ali v kodi JavaScript?

Če želite le preveriti, kaj se dogaja na strani, lahko uporabite zaznamek Vizualni dogodek.

Posodobitev: Vizualni dogodek 2 je na voljo;

To je odvisno od tega, kako so dogodki povezani. Za ponazoritev predpostavimo, da imamo naslednji obvladujoči program za klik:

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

Na naš element ga bomo pritrdili z različnimi metodami, od katerih nekatere omogočajo pregled, druge pa ne.

Metoda A) posamezni izvajalec dogodka

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

Metoda B) več obdelovalcev dogodkov

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

Metoda C): jQuery

$(element).click(handler);

• 1.3.x

   // preveri
   var clickEvents = $(element).data("events").click;
   jQuery.each(clickEvents, function(key, value) {
       alert(value) // opozorila "function() { alert('clicked!') }"
   })

• 1.4.x (shrani izvajalca znotraj predmeta)

   // pregled
   var clickEvents = $(element).data("events").click;
   jQuery.each(clickEvents, function(key, handlerObj) {
       alert(handlerObj.handler) // opozorila "function() { alert('clicked!') }"
       // na voljo tudi: handlerObj.type, handlerObj.namespace
   })

(Glej jQuery.fn.data in jQuery.data)

Metoda D): Prototip (neredno)

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

• 1.5.x

   // preveri
   Event.observers.each(function(item) {
       if(item[0] == element) {
           alert(element[2]) // opozorila "function() { alert('clicked!') }"
       }
   })

• 1.6 do vključno 1.6.0.3 (tukaj je zelo težko)

   // pregled. "_eventId" je za < 1.6.0.3 while
   // "_prototypeEventID" je bil uveden v različici 1.6.0.3
   var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click;
   clickEvents.each(function(wrapper){
       alert(wrapper.handler) // opozorila "function() { alert('clicked!') }"
   })

• 1.6.1 (malo bolje)

   // pregled
   var clickEvents = element.getStorage().get('prototype_event_registry').get('click');
   clickEvents.each(function(wrapper){
       alert(wrapper.handler) // opozorila "function() { alert('clicked!') }"
   })

Če imate program Firebug, lahko uporabite console.dir(objekt ali polje), da v dnevnik konzole izpišete lepo drevo katerega koli skalarja, polja ali objekta v javascriptu.

Poskusite:

console.dir(clickEvents);

ali

console.dir(window);