Rechercher les événements attachés/liés d’un élément à l’aide des outils de développement Chrome/Firebug / IE Barre d'outils développeur
Lors de l'inspection du DOM d'une page, j'aimerais connaître rapidement le ou les événements attachés d'un élément
Par exemple, si un bouton a ce HTML DOM
<button id="button1">Click Me</button>
Et quelque part (pas dans un endroit que je connais à l’avance), un événement est associé, par exemple.
$("#button1").click(function(){...});
Je sais que cela peut être fait par programme ( Puis-je trouver des événements liés à un élément avec jQuery? )
mais y a-t-il moyen d'utiliser un seul des outils de développement pour Chrome/Firefox/IE pour afficher une liste d'événements?
Update: j'ai découvert que, dans les versions plus récentes de Chrome, j'avais un onglet appelé EventListeners, mais il semble que cela ne permet pas d'explorer facilement la source de l'événement, car jQuery s'enroule l'original
FireQuery - http://firequery.binaryage.com/ vous permet de voir les événements liés à des éléments et de les explorer
Pour obtenir le premier gestionnaire attaché sur le premier élément $ ("# button1")
$._data($("#button1").get(0),"events").click[0].handler
La longue histoire que personne ne veut entendre:Je suis venu ici à la recherche d'un plugin. J'étais ravi de voir la réponse de @ schmidlop, mais dans jQuery qui ne me donne pas l'auditeur recherché, il affiche simplement le gestionnaire générique des événements jQuery qui appellent finalement le rappel spécifique. Je suis toujours à la recherche d'un plug-in Chrome qui me permettrait de cliquer avec le bouton droit de la souris sur un élément et de me permettre de percer les gestionnaires attachés à l'objet.
Parce que ce serait cool.
UPDATE: J'ai trouvé une extension chrome appelée jQuery Debugger. Vous devez simplement "Inspecter élément" et choisir "Evénements jQuery" dans le sous-menu "Eléments" ...https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclhcmjimi
Il existe maintenant un onglet Auditeurs d'événement dans Chrome.
Avec l'inspecteur Chrome, sélectionnez l'élément dans l'onglet "Eléments", puis à partir de l'onglet "Console", vous pouvez voir les événements associés à l'élément avec getEventListeners($0);.
Les outils de développement de Firefox affichent maintenant un "ev" à côté des éléments qui ont des événements liés. Cela peut être utilisé pour inspecter les événements liés (y compris les événements jQuery).
Voici un exemple d'inspection de l'élément "Premier paragraphe" de la documentation sur les clics jQuery :
Vous pouvez également vérifier l'addon Visual Event disponible pour Chrome.