Question Comment trouver les écouteurs d'événement sur un noeud DOM lors du débogage ou du code JavaScript?


J'ai une page où certains écouteurs d'événements sont attachés aux boîtes de saisie et sélectionnent des boîtes. Existe-t-il un moyen de savoir quels écouteurs d'événements observent un nœud DOM particulier et pour quel événement?

Les événements sont attachés en utilisant:

  1. Prototype  Event.observe;
  2. DOM addEventListener;
  3. Comme attribut d'élément element.onclick.

706
2018-01-15 14:19


origine


Réponses:


Si vous avez juste besoin d'inspecter ce qui se passe sur une page, vous pouvez essayer Événement visuel bookmarklet.

Mettre à jour: Événement visuel 2 disponible;


469
2017-08-06 17:48



Cela dépend de la façon dont les événements sont attachés. Pour l'illustration supposons que nous avons le gestionnaire de clic suivant:

var handler = function() { alert('clicked!') };

Nous allons l'attacher à notre élément en utilisant différentes méthodes, certaines qui permettent l'inspection et d'autres pas.

Méthode A) gestionnaire d'événement unique

element.onclick = handler;
// inspect
alert(element.onclick); // alerts "function() { alert('clicked!') }"

Méthode B) plusieurs gestionnaires d'événements

if(element.addEventListener) { // DOM standard
    element.addEventListener('click', handler, false)
} else if(element.attachEvent) { // IE
    element.attachEvent('onclick', handler)
}
// cannot inspect element to find handlers

Méthode C): jQuery

$(element).click(handler);
  • 1.3.x

    // inspect
    var clickEvents = $(element).data("events").click;
    jQuery.each(clickEvents, function(key, value) {
        alert(value) // alerts "function() { alert('clicked!') }"
    })
    
  • 1.4.x (stocke le gestionnaire à l'intérieur d'un objet)

    // inspect
    var clickEvents = $(element).data("events").click;
    jQuery.each(clickEvents, function(key, handlerObj) {
        alert(handlerObj.handler) // alerts "function() { alert('clicked!') }"
        // also available: handlerObj.type, handlerObj.namespace
    })
    

(Voir jQuery.fn.data et jQuery.data)

Méthode D): Prototype (désordonné)

$(element).observe('click', handler);
  • 1.5.x

    // inspect
    Event.observers.each(function(item) {
        if(item[0] == element) {
            alert(item[2]) // alerts "function() { alert('clicked!') }"
        }
    })
    
  • 1.6 à 1.6.0.3 inclusivement (très difficile ici)

    // inspect. "_eventId" is for < 1.6.0.3 while 
    // "_prototypeEventID" was introduced in 1.6.0.3
    var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click;
    clickEvents.each(function(wrapper){
        alert(wrapper.handler) // alerts "function() { alert('clicked!') }"
    })
    
  • 1.6.1 (un peu mieux)

    // inspect
    var clickEvents = element.getStorage().get('prototype_event_registry').get('click');
    clickEvents.each(function(wrapper){
        alert(wrapper.handler) // alerts "function() { alert('clicked!') }"
    })
    

346
2018-01-15 15:13



Prise en charge de Chrome, Firefox, Vivaldi et Safari getEventListeners(domElement) dans leur console Outils de développement.

Pour la majorité des fins de débogage, cela pourrait être utilisé.

Voici une très bonne référence pour l'utiliser: https://developers.google.com/chrome-developer-tools/docs/commandline-api#geteventlistenersobject


203
2018-05-14 13:40



WebKit Inspector dans les navigateurs Chrome ou Safari le fait maintenant. Il affichera les écouteurs d'événement pour un élément DOM lorsque vous le sélectionnez dans le volet Éléments.


81
2018-01-17 07:39



Il est possible de lister tous les écouteurs d'événements en JavaScript: Ce n'est pas si difficile. il vous suffit de pirater le prototypeLa méthode des éléments HTML (avant ajouter les auditeurs).

function reportIn(e){
    var a = this.lastListenerInfo[this.lastListenerInfo.length-1];
    console.log(a)
}


HTMLAnchorElement.prototype.realAddEventListener = HTMLAnchorElement.prototype.addEventListener;

HTMLAnchorElement.prototype.addEventListener = function(a,b,c){
    this.realAddEventListener(a,reportIn,c); 
    this.realAddEventListener(a,b,c); 
    if(!this.lastListenerInfo){  this.lastListenerInfo = new Array()};
    this.lastListenerInfo.push({a : a, b : b , c : c});
};

Maintenant, chaque élément d'ancrage (a) aura un lastListenerInfo propriété qui contient tous ses auditeurs. Et il fonctionne même pour supprimer les écouteurs avec des fonctions anonymes.


61
2018-06-22 04:32



(Réécrire la réponse de cette question puisque c'est pertinent ici.)

Lors du débogage, si vous voulez juste voir les événements, je recommande soit ...

  1. Événement visuel
  2. le Éléments section des outils de développement de Chrome: sélectionnez un élément et recherchez "Event Listeners" en bas à droite (similaire dans Firefox)

Si vous souhaitez utiliser les événements dans votre code, et que vous utilisez jQuery avant la version 1.8, vous pouvez utiliser:

$(selector).data("events")

pour obtenir les événements. Depuis la version 1.8, l'utilisation de .data ("events") est interrompue (voir ce ticket de bug). Vous pouvez utiliser:

$._data(element, "events")

Un autre exemple: Écrivez tous les événements de clic sur un certain lien vers la console:

var $myLink = $('a.myClass');
console.log($._data($myLink[0], "events").click);

(voir http://jsfiddle.net/HmsQC/ pour un exemple de travail)

Malheureusement, en utilisant $ ._ data cela n'est pas recommandé à l'exception du débogage car il s'agit d'une structure jQuery interne et pourrait changer dans les prochaines versions. Malheureusement, je ne connais aucun autre moyen facile d'accéder aux événements.


38
2017-10-22 19:04



Utilisez getEventListeners dans Google Chrome:

getEventListeners(document.getElementByID('btnlogin'));
getEventListeners($('#btnlogin'));

26
2018-03-19 09:30



1: Prototype.observe utilise Element.addEventListener (voir le code source)

2: Vous pouvez remplacer Element.addEventListener se souvenir des auditeurs ajoutés (propriété pratique EventListenerList a été retiré de la proposition de spécification DOM3). Exécutez ce code avant l'ajout d'un événement:

(function() {
  Element.prototype._addEventListener = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function(a,b,c) {
    this._addEventListener(a,b,c);
    if(!this.eventListenerList) this.eventListenerList = {};
    if(!this.eventListenerList[a]) this.eventListenerList[a] = [];
    this.eventListenerList[a].push(b);
  };
})();

Lire tous les événements par:

var clicks = someElement.eventListenerList.click;
if(clicks) clicks.forEach(function(f) {
  alert("I listen to this function: "+f.toString());
});

Et n'oubliez pas de surcharger Element.removeEventListener pour supprimer l'événement de la coutume Element.eventListenerList.

3: le Element.onclick la propriété a besoin de soins spéciaux ici:

if(someElement.onclick)
  alert("I also listen tho this: "+someElement.onclick.toString());

4: n'oublie pas le Element.onclick attribut de contenu: ce sont deux choses différentes:

someElement.onclick = someHandler; // IDL attribute
someElement.setAttribute("onclick","otherHandler(event)"); // content attribute

Donc vous devez le gérer aussi:

var click = someElement.getAttribute("onclick");
if(click) alert("I even listen to this: "+click);

Le bookmarklet Visual Event (mentionné dans la réponse la plus populaire) ne vole que le cache du gestionnaire de bibliothèque personnalisé:

Il s'avère qu'il n'y a pas de méthode standard fournie par le W3C   interface DOM recommandée pour savoir quels écouteurs d'événement sont   attaché à un élément particulier. Bien que cela puisse sembler être un   surveillance, il y avait une proposition d'inclure une propriété appelée   eventListenerList à la spécification DOM de niveau 3, mais était   malheureusement été retiré dans les versions ultérieures. En tant que tel, nous sommes obligés de   regardé les bibliothèques Javascript individuelles, qui typiquement   maintenir un cache des événements attachés (afin qu'ils puissent ensuite être supprimés et   effectuer d'autres abstractions utiles).

En tant que tel, pour que Visual Event montre des événements, il doit pouvoir   analyser les informations d'événement sur une bibliothèque Javascript.

La substitution d'élément peut être discutable (parce qu'il y a des fonctionnalités spécifiques au DOM comme les collections live, qui ne peuvent pas être codées dans JS), mais cela donne nativement le support eventListenerList et cela fonctionne dans Chrome, Firefox et Opera (ne fonctionne pas dans IE7 ).


22
2018-04-03 15:08



Vous pouvez envelopper les méthodes DOM natives pour gérer les écouteurs d'événements en les mettant en haut de votre <head>:

<script>
    (function(w){
        var originalAdd = w.addEventListener;
        w.addEventListener = function(){
            // add your own stuff here to debug
            return originalAdd.apply(this, arguments);
        };

        var originalRemove = w.removeEventListener;
        w.removeEventListener = function(){
            // add your own stuff here to debug
            return originalRemove.apply(this, arguments);
        };
    })(window);
</script>

H / T @ les2


21
2017-11-06 17:49



Les outils de développement de Firefox le font maintenant. Les événements sont affichés en cliquant sur le bouton "ev" à droite de l'affichage de chaque élément, y compris jQuery et DOM événements.

Screenshot of Firefox developer tools' event listener button in the inspector tab


16
2018-01-14 15:33



Si tu as Pyromane, vous pouvez utiliser console.dir(object or array) pour imprimer un arbre dans le journal de la console de tout scalaire, tableau ou objet JavaScript.

Essayer:

console.dir(clickEvents);

ou

console.dir(window);

12
2018-01-07 22:52