Inspectez les gestionnaires d'événements attachés pour tout élément DOM

Existe-t-il un moyen de voir quelles fonctions / codes sont attachés à un événement pour un élément DOM? Utilisation de Firebug ou de tout autre outil.

Les gestionnaires d'événements attachés en utilisant traditionnel element.onclick= handlerou HTML <element onclick="handler">peuvent être extraits de manière simple de la element.onclickpropriété à partir d'un script ou d'un débogueur.

Les gestionnaires d'événements attachés à l'aide des addEventListenerméthodes d' événements DOM de niveau 2 et d'IE attachEventne peuvent actuellement pas être récupérés à partir du script. DOM Level 3 proposait une fois element.eventListenerListd'obtenir tous les écouteurs, mais il n'est pas clair si cela atteindra la spécification finale. Il n'y a aujourd'hui aucune implémentation dans aucun navigateur.

Un outil de débogage en tant qu'extension de navigateur pourrait avoir accès à ce type d'écouteurs, mais je n'en connais pas.

Certains frameworks JS laissent un enregistrement suffisant de la liaison d'événements pour déterminer ce qu'ils ont fait. Visual Event adopte cette approche pour découvrir les écouteurs enregistrés via quelques frameworks populaires.

Le panneau Elements dans les outils de développement de Google Chrome a cela depuis les versions de Chrome à la mi-2011 et les versions de canal de développement Chrome depuis 2010.

En outre, les écouteurs d'événements affichés pour le nœud sélectionné sont dans l'ordre dans lequel ils sont déclenchés pendant les phases de capture et de bullage.

Appuyez sur command+ option+ isur Mac OSX et Ctrl+ Shift+ isur Windows pour activer ceci dans Chrome

Chrome Dev Tools a récemment annoncé de nouveaux outils pour la surveillance des événements JavaScript .

TL; DR

Écoutez les événements d'un certain type à l'aide de monitorEvents().

Utilisez unmonitorEvents()pour arrêter d'écouter.

Obtenez les écouteurs d'un élément DOM en utilisant getEventListeners().

Utilisez le panneau Inspecteur des écouteurs d'événements pour obtenir des informations sur les écouteurs d'événements.

Recherche d'événements personnalisés

Pour mon besoin, en découvrant des événements JS personnalisés dans du code tiers, les deux versions suivantes du getEventListeners()ont été incroyablement utiles;

• getEventListeners(window)
• getEventListeners(document)

Si vous savez à quel nœud DOM l'écouteur d'événements était attaché, vous le transmettriez au lieu de windowou document.

Événement connu

Si vous savez quel événement vous souhaitez surveiller, par exemple clicksur le corps du document, vous pouvez utiliser ce qui suit:monitorEvents(document.body, 'click'); .

Vous devriez maintenant commencer à voir tous les événements de clic lors de la document.bodyconnexion dans la console.

Vous pouvez afficher les événements directement attachés (element.onclick = handler) en regardant le DOM. Vous pouvez afficher les événements attachés à jQuery dans Firefox en utilisant FireBug avec FireQuery. Il ne semble pas y avoir de moyen de voir les événements ajoutés à addEventListener à l'aide de FireBug. Cependant, vous pouvez les voir dans Chrome à l'aide du débogueur Chrome.

Vous pouvez utiliser Visual Event par Allan Jardine pour inspecter tous les gestionnaires d'événements actuellement attachés à partir de plusieurs bibliothèques JavaScript majeures sur votre page. Cela fonctionne avec jQuery, YUI et plusieurs autres.

Visual Event est un bookmarklet JavaScript donc compatible avec tous les principaux navigateurs.

Vous pouvez étendre votre environnement javascript pour garder une trace des écouteurs d'événements. Enveloppez (ou 'surchargez') la méthode native addEventListener () avec du code qui peut conserver un enregistrement de tout écouteur d'événement ajouté à partir de là . Vous devrez également étendre HTMLElement.prototype.removeEventListener pour conserver des enregistrements reflétant précisément ce qui se passe dans le DOM.

Juste à titre d'illustration (code non testé) - ceci est un exemple de la façon dont vous `` encapsuleriez '' addEventListener pour avoir des enregistrements des écouteurs d'événements enregistrés sur l'objet lui-même:

var nativeMethod = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function (type, listener) {
   var el = e.currentTarget;
   if(!(el.eventListeners instanceof Array)) { el.eventListeners = []}
   el.eventListeners.push({'type':type, 'listener':listener});
   nativeMethod.call(el, type, listener);
}