Hoe vind ik event listeners op een DOM node bij het debuggen of vanuit de JavaScript code?

Als u alleen wilt zien wat er op een pagina gebeurt, kunt u de Visual Event bookmarklet proberen.

Update: Visual Event 2 beschikbaar;

Het hangt ervan af hoe de gebeurtenissen zijn gekoppeld. Ter illustratie veronderstel dat we de volgende click handler hebben:

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

We'gaan het aan ons element hechten met behulp van verschillende methoden, sommige die inspectie toestaan en sommige die dat niet doen'niet.

Methode A) enkele event handler

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

Methode B) meervoudige event handlers

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

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

• 1.4.x (slaat de handler op in een object)

   // inspecteren
   var clickEvents = $(element).data("events").click;
   jQuery.each(clickEvents, function(key, handlerObj) {
       alert(handlerObj.handler) // alerts "function() { alert('clicked!') }"
       // ook beschikbaar: handlerObj.type, handlerObj.namespace
   })

(Zie jQuery.fn.data en jQuery.data)

Methode D): Prototype (rommelig)

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

• 1.5.x

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

• 1.6 tot 1.6.0.3, inclusief (werd erg moeilijk hier)

   // inspect. "_eventId" is voor < 1.6.0.3 terwijl
   // "_prototypeEventID" werd geïntroduceerd in 1.6.0.3
   var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click;
   clickEvents.each(function(wrapper){
       alert(wrapper.handler) // alerts "function() { alert('clicked!') }"
   })

• 1.6.1 (beetje beter)

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

Als je Firebug hebt, kun je console.dir(object of array) gebruiken om een mooie boom af te drukken in de console log van elke JavaScript scalar, array, of object.

Probeer maar eens:

console.dir(clickEvents);

of

console.dir(window);