Inspecter les joints des gestionnaires d'événements pour n'importe quel élément du DOM

Est-il un moyen pour voir quelles fonctions /code sont attachés à n'importe quel événement pour un élément du DOM? À l'aide de Firebug, ou tout autre outil.

  • Attachés à l'aide de jQuery ou de l'utilisation de natifs de DOM?
  • Bonne question. Attaché à l'aide d'un mécanisme de
InformationsquelleAutor Claudio Redi | 2010-04-12
  1. 68

    Gestionnaires d'événements attachés à l'aide du traditionnel element.onclick= handler ou HTML <element onclick="handler"> peuvent être récupérées trivialement de la element.onclick propriété à partir d'un script ou dans le débogueur.

    Gestionnaires d'événements attachés à l'aide de DOM Niveau 2 Événements addEventListener méthodes et IE attachEvent actuellement, ne peuvent pas être récupérées à partir d'un script à tous. 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. Visuel De L'Événement prend cette approche pour découvrir les auditeurs inscrits au travers de quelques infrastructures populaires.

    • Il y a maintenant est une extension Firebug appelé EventBug et aurait une fonction similaire dans chrome/safari. Je vais également créer un lien vers une plus populaires de discussion à ce sujet: stackoverflow.com/questions/446892/...
    • Je ne vois pas cette extension sur le FF extensions DB..
    • À l'Opéra, vous pouvez utiliser les haut-Opera Dragonfly pour que.
    • Il y a également un construit en partie à FireBug (Extension de FireFox) pour les événements lors de la balise HTML est sélectionné.
    • EventBug est intégré dans FireBug depuis la version 2 (il y a un "Événements" de l'onglet maintenant).
    • Depuis Firefox 33, les gestionnaires d'événements sont présentés dans le stock HTML inspecteur.

    InformationsquelleAutor bobince
  2. 72

    La 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.

    Appuyez sur commande + option + i sur Mac OSX et Ctrl + Maj + i sur Windows à feu dans Chrome

    Inspecter les joints des gestionnaires d'événements pour n'importe quel élément du DOM

    • Comment les éléments du panneau de Chrome ce faire?
    • Aussi, comment pouvons-nous trouver le code qui affecte ces? Une fois que j'ai trouver un suspect gestionnaire d'événement à l'aide de cette INTERFACE utilisateur, le bar n'est pas assez large pour moi de voir le code du gestionnaire...
    • Je trouve cette approche un peu confus.. au moins pour moi. Quand j'ai ouvert l'événement, il n'y a jQuery événements, mon événement personnalisé pour cet élément n'apparaît pas. J'utilise $._data pour des événements personnalisés-je joindre avec jQuery. Voir stackoverflow.com/questions/2008592/...
    • Est-il possible d'inspecter les événements sur le window l'objet, comme la message événement?
    InformationsquelleAutor tuxtitlan
  3. 6

    Vous pouvez consulter directement rattaché événements (l'élément.onclick = gestionnaire) en regardant les DOM.
    Vous pouvez afficher jQuery-des événements attachés dans Firefox à l'aide de FireBug avec FireQuery. Il ne semble pas être une manière de voir la méthode addEventListener-ajout d'événements à l'aide de FireBug. Cependant, vous pouvez les voir dans Chrome en utilisant le Chrome débogueur.

    InformationsquelleAutor mhenry1384
  4. 6

    Vous pouvez utiliser Visuel De L'Événement par Allan Jardine pour inspecter tous les joints des gestionnaires d'événement de plusieurs grandes bibliothèques JavaScript sur votre page. Il fonctionne avec jQuery, YUI et plusieurs autres.

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

    InformationsquelleAutor Medlock Perlman
  5. 6

    Chrome Dev Tools a récemment annoncé de nouveaux outils pour Surveillance Des Événements JavaScript.

    TL;DR

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

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

    Obtenir les auditeurs d'un élément du DOM à l'aide de getEventListeners().

    Utiliser les Écouteurs d'Événement Inspecteur du panneau pour obtenir des informations sur les écouteurs d'événement.

    Trouver Des Événements Personnalisés

    Pour mon besoin, à la découverte personnalisée JS événements dans la 3ème partie du code, les deux versions de la getEventListeners() ont été incroyablement utiles;

    • getEventListeners(window)
    • getEventListeners(document)

    Si vous savez ce Nœud DOM l'écouteur d'événement a été attaché à vous d passer qu'au lieu de window ou document.

    Événement Connu

    Si vous savez quel événement que vous souhaitez surveiller, par exemple, click sur le corps du document, vous pouvez utiliser les éléments suivants: monitorEvents(document.body, 'click');.

    Vous devez maintenant commencer à voir tous les événements click sur le document.body être connecté à la console.

    • J'ai essayé thisgetEventListeners(document.getElementById("inputId")); mais elle renvoie non valide, avec un tableau de taille 1
    InformationsquelleAutor GFargo
  6. 0

    Vous pouvez étendre votre environnement javascript pour garder une trace des écouteurs d'événement. Wrap (ou "surcharge"), le natif méthode addEventListener() avec un peu de code que des canettes de garder une trace de tout écouteur d'événement ajouté à partir. Il faudrait aussi étendre HTMLElement.le prototype.removeEventListener de tenir des registres qui reflètent exactement ce qui se passe dans les DOM.

    Juste pour le plaisir de l'illustration (code non testé) - ceci est un exemple de la façon dont vous le feriez 'wrap' addEventListener d'avoir des dossiers de l'événement enregistré auditeurs 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);
}
    InformationsquelleAutor Rolf