web-dev-qa-db-fra.com

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

Existe-t-il un moyen de visualiser les fonctions/codes associés à un événement pour un élément DOM? Utiliser Firebug ou tout autre outil.

javascriptevents
103
Claudio Redi

Les gestionnaires d’événements attachés à l’aide de la méthode traditionnelle element.onclick= handler ou HTML <element onclick="handler"> peut être récupéré trivialement à partir du element.onclick propriété du script ou du débogueur.

Les gestionnaires d'événements attachés à l'aide des méthodes DOM Level 2 Events addEventListener et attachEvent d'IE ne peuvent actuellement pas être récupérés à partir d'un script. DOM niveau 3 une fois proposé element.eventListenerList pour obtenir tous les auditeurs, mais il n’est pas clair si cela aboutira à la spécification finale. Il n'y a aucune implémentation dans aucun navigateur aujourd'hui.

Un outil de débogage en tant qu'extension de navigateur pourrait accéder à ce type d'écouteurs, mais je ne suis au courant d'aucun de ceux-ci.

Certains frameworks JS laissent suffisamment d’événements de liaison d’événement pour savoir ce qu’ils ont fait. Visual Event adopte cette approche pour découvrir les écouteurs enregistrés via quelques frameworks populaires.

69
bobince

Le Elements Panel dans Google Chrome Outils de développement) l’a depuis Chrome est sorti mi-2011 et Chrome communiqués de la chaîne des développeurs depuis 2010.

De plus, les écouteurs d'événements affichés pour le nœud sélectionné sont dans l'ordre dans lequel ils sont déclenchés au cours des phases de capture et de propagation.

Frappé command + option + i sur Mac OSX et Ctrl + Shift + i sous Windows pour lancer ceci dans Chrome

dev tools screenshot

73
tuxtitlan

Outils de développement Chrome ont récemment annoncé de nouveaux outils pour Contrôle des événements JavaScript .

TL; DR

Écoutez les événements d'un certain type en utilisant monitorEvents().

Utilisez unmonitorEvents() pour arrêter l'écoute.

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

Utilisez le panneau de l'inspecteur Auditeurs d'événements pour obtenir des informations sur les écouteurs d'événements.

Recherche d'événements personnalisés

Pour mon besoin, la découverte d'événements JS personnalisés dans du code tiers, les deux versions suivantes de getEventListeners() ont été incroyablement utiles;

  • getEventListeners(window)
  • getEventListeners(document)

Si vous savez quel type de DOM Node l'écouteur d'événements vous était associé) transmettriez cela au lieu de window ou document.

Evénement connu

Si vous savez quel événement vous souhaitez surveiller, par exemple click sur 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 sur le document.body en cours de connexion à la console.

7
GFargo

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

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

6
Medlock Perlman

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

6
mhenry1384

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énements ajouté à partir de ce moment-là. Vous devez également étendre HTMLElement.prototype.removeEventListener pour conserver des enregistrements qui reflètent avec précision ce qui se passe dans le DOM.

Juste à titre d’illustration (code non testé) - c’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 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);
}
0
Rolf