Comment trouver des écouteurs d'événement sur un nœud DOM lors du débogage ou à partir du code JavaScript?
J'ai une page où certains des écouteurs d'événement sont attachés à des zones de saisie et sélectionnez les cases. Est-il un moyen de savoir qui des écouteurs d'événement sont en train d'observer un particulier nœud DOM et pour quel événement?
Événements sont attachés à l'aide:
- Du Prototype
Event.observe
; - DOM du
addEventListener
; - Comme attribut d'élément
element.onclick
.
- Comment sont les événements les plus attachés à la première place? Êtes-vous à l'aide d'une bibliothèque (par exemple, Prototype, jQuery, etc)?
- Il est important de noter que plusieurs fonctions de rappel peut être joint pour le même type d'événement via
element.addEventListener(type, callback, [bubble])
, tandis queelement.onclick = function
écrase à chaque fois que vous affecter.
Vous devez vous connecter pour publier un commentaire.
Si vous avez juste besoin d'inspecter ce qui se passe sur une page, vous pouvez essayer le Visuel De L'Événement bookmarklet.
Mise à jour: Événement Visuel 2 disponibles;
EventBug
plugin.Il dépend de la façon dont les événements sont attachés. Pour illustration présumer nous avons la suite cliquez sur gestionnaire de:
Nous allons nous attacher à notre élément à l'aide de différentes méthodes, dont certaines permettent d'inspection et d'autres qui ne le sont pas.
Méthode A) seul gestionnaire d'événements
Méthode B) plusieurs gestionnaires d'événements
Méthode C): jQuery
1.3.x
1.4.x (magasins le gestionnaire à l'intérieur d'un objet)
(Voir
jQuery.fn.les données
etjQuery.les données
)Méthode D): Prototype (en désordre)
1.5.x
1,6 à 1.6.0.3, inclusive (a été très difficile ici)
1.6.1 (peu mieux faire)
addEventListener
?$(parentElement).on(event, 'myElement', handler);
?.data('events')
comme ils étaient avant. Pour accéder à l'événement interne des données, l'utilisation$._data(elem, 'events')
. Notez que cette fonction est la mention "pour usage interne seulement" dans le jQuery source, donc pas de promesses qu'il le sera toujours dans l'avenir, mais je crois qu'elle l'a travaillé depuis jQuery 1.7 et fonctionne toujours.Chrome, Firefox, Vivaldi et Safari soutien
getEventListeners(domElement)
dans leurs Outils de développement de la console.Pour la majorité des fins de débogage, ce qui pourrait être utilisé.
Ci-dessous est une très bonne référence pour l'utiliser:
https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners
getEventListeners(object)
PAS:obj getEventListeners()
que j'ai d'abord pensé 🙂var list = getEventListeners(document.getElementById("YOURIDHERE")); console.log(list["focus"][0]["listener"].toString())
. Changement de "focus" pour l'événement que vous souhaitez inspecter et le nombre s'il y a plusieurs auditeurs sur le même événement.getEventListeners($0)
obtiendrez les écouteurs d'événement pour l'élément que vous avez porté sur le Chrome dev tools. J'en utilise tout le temps. Aime ne pas avoir à utiliser querySelector ou d'obtenir de l'__Par_ fonctionsWebKit Inspecteur de Chrome ou les navigateurs Safari maintenant cette. Il affiche les écouteurs d'événement pour un élément du DOM, lorsque vous le sélectionnez dans les Éléments volet.
Il est possible d'énumérer tous les écouteurs d'événements en JavaScript: Il n'est pas difficile, il suffit de pirater le
prototype
's de la méthode des éléments HTML (avant ajoutant les auditeurs).Maintenant, chaque élément d'ancrage (
a
) aura unlastListenerInfo
de la propriété qui contient l'ensemble de ses auditeurs. Et cela fonctionne même pour la suppression des auditeurs avec des fonctions anonymes.Node.prototype
à la place? C'est là queHTMLAnchorElement
hérite.addEventListener
de toute façon.'removeEventListener
le même que vous avez fait avecaddEventListener
votre lastListenerInfo tableau aurait exactement ce que l'OP a demandé (bien qu'il parlait d'entrée et de sélectionner des éléments, et non des ancres, mais soit).Utilisation getEventListeners dans Google Chrome:
(Réécriture de la réponse de cette question puisque c'est d'actualité ici.)
Lors du débogage, si vous voulez juste pour voir les événements, je vous conseille de...
Si vous souhaitez utiliser les événements dans votre code, et vous êtes à l'aide de jQuery avant la version 1.8, vous pouvez utiliser:
pour obtenir les événements. À partir de la version 1.8 de l'aide .de données("événements") est interrompu (voir ce bug billet). Vous pouvez utiliser:
Un autre exemple: Écrire tous les événements de clic sur un lien spécifique à la console:
(voir http://jsfiddle.net/HmsQC/ pour un exemple)
Malheureusement, à l'aide de $._data ce n'est pas recommandé sauf à des fins de débogage, car il est interne jQuery structure, et pourrait changer dans les versions futures. Malheureusement, je ne connais pas d'autre moyen facile d'accéder aux événements.
$._data(elem, "events")
ne semble pas fonctionner avec jQuery 1.10, au moins pour les événements enregistrés à l'aide d'$(elem).on('event', ...)
. Personne ne sait comment déboguer ces?$._data
devrez peut-être un élément, et pas un objet jQuery. J'ai donc besoin de fixer mon exemple ci-dessus pour êtreconsole.log($._data($myLink[0], "events").click);
1:
Prototype.observe
utilise l'Élément.la méthode addEventListener (voir le code source)2: Vous pouvez remplacer les
Element.addEventListener
de se rappeler l'ajout d'auditeurs (pratique de la propriétéEventListenerList
a été retiré de DOM3 spec proposition). Exécutez ce code avant une manifestation est fixé:Lire tous les événements par:
Et n'oubliez pas de remplacer
Element.removeEventListener
pour supprimer l'événement à partir de la coutumeElement.eventListenerList
.3: le
Element.onclick
propriété a besoin de soins spéciaux ici:4: ne pas oublier la
Element.onclick
contenu de l'attribut: ce sont deux choses différentes:Si vous avez besoin de gérer, de trop:
L'Événement Visuel bookmarklet (mentionné dans la réponse la plus populaire) seulement s'empare de la bibliothèque personnalisés du gestionnaire de cache:
Élément primordial est peut-être discutable (c'est à dire parce qu'il y a certains DOM fonctionnalités spécifiques comme les collections vivantes, qui ne peut pas être codé en JS), mais il donne l'eventListenerList support en natif et il fonctionne dans Chrome, Firefox et Opera (ne fonctionne pas sous IE7).
Vous pouvez rassembler le natif DOM méthodes pour la gestion des écouteurs d'événement en mettant en haut de votre
<head>
:H/T @les2
Firefox developer tools maintenant cette. Les événements sont affichés en cliquant sur le "ev" sur le bouton de droite de chaque élément d'affichage, y compris jQuery et DOM événements.
Si vous avez Firebug, vous pouvez utiliser
console.dir(object or array)
pour imprimer un bel arbre dans le journal de la console de n'importe quel JavaScript scalaire, un tableau ou d'un objet.Essayer:
ou
Pleinement solution de travail basé sur réponse de Jan Turon - se comporte comme
getEventListeners()
à partir de la console:(Il y a un petit bug avec les doublons. Il ne rompt pas beaucoup de toute façon.)
Utilisation:
someElement.getEventListeners([name])
- retour liste des écouteurs d'événement, si le nom est de retour tableau des auditeurs pour cet événementsomeElement.clearEventListeners([name])
- supprimer tous les écouteurs d'événement, si le nom est situé à seulement supprimer les auditeurs pour l'événementbody
etdocument
éléments.Opera 12 (pas le dernier Chrome basé sur le moteur Webkit) Libellule a eu pendant un moment et il est évidemment affiché dans le DOM de la structure. C'est à mon avis un supérieur débogueur et est la seule raison qui reste pourquoi j'ai toujours utiliser de l'Opéra, à 12 en fonction de la version (il n'y a pas de v13, v14 et la version v15 basé sur Webkit manque de Libellule encore)
Prototype 1.7.1 façon
J'ai été récemment travaillé avec des événements et je voulais voir/contrôle de tous les événements dans une page. Après avoir examiné les solutions possibles, j'ai décidé d'avoir mon propre chemin et de créer un système personnalisé pour surveiller les événements. Donc, j'ai fait trois choses.
Tout d'abord, j'avais besoin d'un conteneur pour tous les écouteurs d'événement dans la page: c'est le
EventListeners
objet. Il dispose de trois méthodes utiles:add()
,remove()
, etget()
.Ensuite, j'ai créé un
EventListener
objet de détenir les informations nécessaires pour l'événement, c'est à dire:target
,type
,callback
,options
,useCapture
,wantsUntrusted
, et ajouté une méthoderemove()
pour supprimer l'auditeur.Enfin, j'ai étendu le natif
addEventListener()
etremoveEventListener()
méthodes pour les faire travailler avec les objets que j'ai créé (EventListener
etEventListeners
).Utilisation:
addEventListener()
crée unEventListener
objet, il ajoute àEventListeners
et renvoie leEventListener
objet, de sorte qu'il peut être enlevé plus tard.EventListeners.get()
peut être utilisé pour afficher les auditeurs dans la page. Il accepte unEventTarget
ou une chaîne de caractères (type d'événement).Démo
Disons que nous voulons savoir chaque écouteur d'événement dans cette page actuelle. Nous pouvons le faire (en supposant que vous utilisez un gestionnaire de script extension Tampermonkey dans ce cas). Script suivant fait ceci:
Et quand nous la liste de tous les auditeurs, il dit qu'il y a 299 écouteurs d'événement. Il "semble" être des doublons, mais je ne sais pas si ils sont vraiment des doublons. Pas à chaque type d'événement est doublé, de sorte que tous ces "doublons" peut être une personne de l'auditeur.
Code peut être trouvé à mon référentiel. je ne voulais pas le poster ici parce que c'est un peu long.
Mise à jour: Cela ne semble pas fonctionner avec jQuery. Lorsque j'examine l'EventListener, je vois que le rappel est
Je crois que ça, c'est jQuery, et n'est pas le rappel. jQuery magasins réels de rappel dans les propriétés de la EventTarget:
Pour supprimer un écouteur d'événement, le rappel doit être transmis à la
removeEventListener()
méthode. Afin de rendre ce travail avec jQuery, il a besoin de plus de modification. Je pourrais corriger cela dans l'avenir.Je suis en train de le faire en jQuery 2.1, et avec le "
$().click() -> $(element).data("events").click;
" méthode ne fonctionne pas.J'ai réalisé que seul le $._data() fonctions fonctionne dans mon cas :
JS:
HTML:
Il existe de nice jQuery Événements extension :
(sujet source)
la modification de ces fonctions vous permettent de vous connecter aux auditeurs ajouté:
lire le reste de l'auditoire avec