Inspecter les gestionnaires d’événements attachés pour n’importe quel élément du DOM

Question

Y a-t-il quelque sorte pour voir ce qui fonctionne / code attachés à n’importe quel événement pour un élément DOM ? À l’aide de Firebug ou tout autre outil.

Answer 1

Les Éléments du Panneau dans Google Chrome Developer tools a eu ce depuis Chrome rejets dans le milieu de 2011 et Chrome developer channel versions depuis 2010.

Aussi, les écouteurs d'événement indiqué pour le nœud sélectionné sont dans l'ordre dans lequel ils sont licenciés par le biais de la capture et de la phase de propagation.

Frappé de commande + option + i sur Mac OSX et Ctrl + Maj + i sur Windows à feu dans Chrome

Answer 2

Les gestionnaires d'événements attaché à l'aide d'traditionnels element.onclick= handler ou HTML <element onclick="handler"> peuvent être récupérées de façon triviale de l' element.onclick de la propriété à partir d'un script ou dans le débogueur.

Les gestionnaires d'événements attachés à l'aide de DOM Niveau 2 addEventListener méthodes et IE attachEvent actuellement, ne peuvent pas être récupérées à partir d'un script. DOM Niveau 3 une fois proposé, element.eventListenerList pour obtenir tous les auditeurs, mais il est difficile de savoir si ce sera à la finale de la spécification. Il n'y a pas de mise en œuvre dans n'importe quel navigateur aujourd'hui.

Un outil de débogage comme extension de navigateur pourrait obtenir l'accès à ces types d'auditeurs, mais je ne suis pas au courant de tout ce que fait en réalité.

Certains frameworks JS laisser assez d'un dossier de liaison d'événements à quoi ils avez été à la hauteur. Événement visuel prend cette approche pour découvrir les auditeurs inscrits au travers de quelques infrastructures populaires.

Answer 3

Vous pouvez afficher les événements directement attachés (element.onclick = gestionnaire) en regardant le DOM. Vous pouvez afficher les événements jQuery-attaché dans Firefox avec FireBug FireQuery. Il ne semble pas être est-il possible de voir les événements addEventListener-ajouté à l’aide de FireBug. Toutefois, vous pouvez les voir en Chrome à l’aide du débogueur de Chrome.

Answer 4

Vous pouvez utiliser l' Événement visuel par Allan Jardine d’inspecter tous les gestionnaires d’événement actuellement attaché de plusieurs grandes bibliothèques JavaScript sur votre page. Il fonctionne avec jQuery, YUI et plusieurs autres.

Événement visuel est qu'un bookmarklet JavaScript est donc compatible avec tous les principaux navigateurs.