Ako nájsť poslucháčov udalostí v uzle DOM pri ladení alebo z kódu JavaScriptu?

Ak potrebujete len skontrolovať, čo sa deje na stránke, môžete vyskúšať záložku Visual Event.

Aktualizácia: Vizuálna udalosť 2 k dispozícii;

Záleží na tom, ako sú udalosti pripojené. Pre ilustráciu predpokladajme, že máme nasledujúcu obsluhu kliknutia:

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

Pripojíme ho k nášmu prvku pomocou rôznych metód, z ktorých niektoré umožňujú kontrolu a niektoré nie.

Metóda A) obsluha jednej udalosti

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

Metóda B) obsluha viacerých udalostí

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

Metóda C): jQuery

$(element).click(handler);

• 1.3.x

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

• 1.4.x (ukladá obsluhu vo vnútri objektu)

   // skontrolovať
   var clickEvents = $(element).data("events").click;
   jQuery.each(clickEvents, function(key, handlerObj) {
       alert(handlerObj.handler) // upozornenia "function() { alert('clicked!') }"
       // k dispozícii aj: handlerObj.type, handlerObj.namespace
   })

(Pozri jQuery.fn.data a jQuery.data)

Metóda D): Prototyp (chaotický)

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

• 1.5.x

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

• 1.6 až 1.6.0.3 vrátane (tu to bolo veľmi ťažké)

   // kontrola. "_eventId" je pre < 1.6.0.3 while
   // "_prototypeEventID" bol zavedený v 1.6.0.3
   var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click;
   clickEvents.each(function(wrapper){
       alert(wrapper.handler) // upozornenia "function() { alert('clicked!') }"
   })

• 1.6.1 (trochu lepšie)

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

Ak máte Firebug, môžete použiť console.dir(objekt alebo pole) na vypísanie pekného stromu v konzolovom logu akéhokoľvek skalára, poľa alebo objektu JavaScriptu.

Vyskúšajte:

console.dir(clickEvents);

alebo

console.dir(window);