J'ai une page où certains écouteurs d'événements sont attachés aux boîtes de saisie et aux boîtes de sélection. Existe-t-il un moyen de savoir quels écouteurs d'événements observent un nœud DOM particulier et pour quel événement ?
Les événements sont attachés en utilisant :
Event.observe
;addEventListener
;element.onclick
.[1] : http://en.wikipedia.org/wiki/Prototype_JavaScript_Framework
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" ;).click ;
jQuery.each(clickEvents, function(key, value) {
alert(value) // alertes "function() { alert('clicked!' ;) }" ;
})
1.4.x (stocke le gestionnaire dans un objet)
// inspecter
var clickEvents = $(element).data("events" ;).click ;
jQuery.each(clickEvents, function(key, handlerObj) {
alert(handlerObj.handler) // alertes "function() { alert('clicked!' ;) }" ;
// é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!' ;) }" ;
}
})
1.6 à 1.6.0.3, inclus (c'est devenu très difficile ici)
// inspecter. "_eventId" ; est pour < 1.6.0.3 alors que
// "_prototypeEventID" ; 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!' ;) }" ;
})
1.6.1 (un peu mieux)
// inspecter
var clickEvents = element.getStorage().get('prototype_event_registry' ;).get('click' ;);
clickEvents.each(function(wrapper){
alert(wrapper.handler) // alertes "function() { alert('clicked!' ;) }" ;
})
[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);