Comment trouver les écouteurs d'événements sur un nœud du DOM lors du débogage ou à partir du code JavaScript ?

Si vous avez simplement besoin d'inspecter ce qui se passe sur une page, vous pouvez essayer le bookmarklet [Visual Event][1].

Mise à jour : [Visual Event 2][2] disponible ;

[1] : http://www.sprymedia.co.uk/article/Visual+Event [2] : http://www.sprymedia.co.uk/article/Visual+Event+2

Cela dépend de la façon dont les événements sont attachés. À titre d'illustration, supposons que nous ayons le gestionnaire de clic suivant :

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

Nous allons l'attacher à notre élément à l'aide de différentes méthodes, certaines permettant l'inspection et d'autres non.

Méthode A) Gestionnaire d'événement unique

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

Méthode B) Gestionnaire d'événements multiples

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

Méthode C) : jQuery

$(element).click(handler);

• 1.3.x

   // inspecter
   var clickEvents = $(element).data("events&quot ;).click ;
   jQuery.each(clickEvents, function(key, value) {
       alert(value) // alertes "function() { alert('clicked!&#39 ;) }&quot ;
   })

• 1.4.x (stocke le gestionnaire dans un objet)

   // inspecter
   var clickEvents = $(element).data("events&quot ;).click ;
   jQuery.each(clickEvents, function(key, handlerObj) {
       alert(handlerObj.handler) // alertes "function() { alert('clicked!&#39 ;) }&quot ;
       // également disponible : handlerObj.type, handlerObj.namespace
   })

(Voir [jQuery.fn.data][1] et [jQuery.data][2])

Méthode D) : Prototype (désordonné)

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

• 1.5.x

   // inspecter
   Event.observers.each(function(item) {
       if(item[0] == element) {
           alert(item[2]) // alertes "function() { alert('clicked!&#39 ;) }&quot ;
       }
   })

• 1.6 à 1.6.0.3, inclus (c'est devenu très difficile ici)

   // inspecter. "_eventId&quot ; est pour < 1.6.0.3 alors que
   // "_prototypeEventID&quot ; a été introduit en 1.6.0.3
   var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click ;
   clickEvents.each(function(wrapper){
       alert(wrapper.handler) // alertes "function() { alert('clicked!&#39 ;) }&quot ;
   })

• 1.6.1 (un peu mieux)

   // inspecter
   var clickEvents = element.getStorage().get('prototype_event_registry&#39 ;).get('click&#39 ;);
   clickEvents.each(function(wrapper){
       alert(wrapper.handler) // alertes "function() { alert('clicked!&#39 ;) }&quot ;
   })

[1] : http://docs.jquery.com/Core/data#name [2] : http://docs.jquery.com/Internals/jQuery.data

Si vous avez [Firebug][1], vous pouvez utiliser console.dir(objet ou tableau) pour imprimer un bel arbre dans le journal de la console de tout scalaire, tableau ou objet JavaScript.

Essayez :

console.dir(clickEvents);

ou

console.dir(window);

[1] : http://en.wikipedia.org/wiki/Firebug_%28software%29