Comment trouver des écouteurs d'événements sur un nœud DOM lors du débogage ou à partir du code JavaScript?

J'ai une page où certains écouteurs d'événements sont attachés aux zones de saisie et aux zones de sélection. 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.

Si vous avez juste besoin d'inspecter ce qui se passe sur une page, vous pouvez essayer le bookmarklet Visual Event .

Mise à jour : Visual Event 2 disponible.

Cela dépend de la façon dont les événements sont attachés. Pour l'illustration, supposons que nous avons le gestionnaire de clics 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 qui ne le permettent pas.

Méthode A) gestionnaire d'événements 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 dans 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.dataet 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, inclus (est devenu 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 (peu mieux)

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

Prise getEventListeners(domElement)en charge de Chrome, Firefox, Vivaldi et Safari dans leur console Developer Tools.

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

Ci-dessous, une très bonne référence pour l'utiliser: https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners

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

Il est possible de lister tous les écouteurs d'événements en JavaScript: ce n'est pas si difficile; il vous suffit de pirater la prototypeméthode des éléments HTML ( avant d' ajouter les écouteurs).

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});
};

Désormais, chaque élément d'ancrage ( a) aura une lastListenerInfopropriété qui contient tous ses écouteurs. Et cela fonctionne même pour supprimer les écouteurs avec des fonctions anonymes.

Utilisez getEventListeners dans Google Chrome :

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

(Réécriture de la réponse à cette question car elle est pertinente ici.)

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

1. Événement visuel
2. La section Éléments des outils de développement de Chrome: sélectionnez un élément et recherchez "écouteurs d'événements" 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 ("événements") est arrêtée (voir ce ticket de bogue ). 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, l' utilisation de données $ ._ n'est pas recommandée, sauf pour le débogage, car il s'agit d'une structure jQuery interne et pourrait changer dans les versions futures. Malheureusement, je ne connais aucun autre moyen facile d'accéder aux événements.

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

2: Vous pouvez remplacer Element.addEventListenerpour vous souvenir des écouteurs ajoutés (la propriété pratique a EventListenerListété supprimée de la proposition de spécification DOM3). Exécutez ce code avant de rattacher 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);
  };
})();

Lisez 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 remplacer Element.removeEventListenerpour supprimer l'événement de la coutume Element.eventListenerList.

3: la Element.onclickpropriété a besoin d'un soin particulier ici:

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

4: n'oubliez pas l' Element.onclickattribut content: ce sont deux choses différentes:

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

Vous devez donc aussi le gérer:

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 l'interface DOM recommandée par le W3C pour savoir quels écouteurs d'événements sont attachés à un élément particulier. Bien que cela puisse sembler être une erreur, il a été proposé d'inclure une propriété appelée eventListenerList dans la spécification DOM de niveau 3, mais a malheureusement été supprimée dans les versions ultérieures. En tant que tel, nous sommes obligés de regarder les bibliothèques Javascript individuelles, qui maintiennent généralement un cache des événements attachés (afin qu'ils puissent plus tard être supprimés et effectuer d'autres abstractions utiles).

En tant que tel, pour que Visual Event affiche des événements, il doit être capable d'analyser les informations d'événement à partir d'une bibliothèque Javascript.

La substitution d'éléments peut être discutable (c'est-à-dire parce qu'il existe certaines fonctionnalités spécifiques au DOM comme les collections en direct, qui ne peuvent pas être codées dans JS), mais cela donne le support eventListenerList en natif et cela fonctionne dans Chrome, Firefox et Opera (ne fonctionne pas dans IE7 ).

Vous pouvez encapsuler les méthodes natives DOM pour gérer les écouteurs d'événements en les plaçant 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

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 les événements jQuery et DOM .

Si vous avez Firebug , vous pouvez utiliser console.dir(object or array)pour imprimer une belle arborescence dans le journal de la console de tout scalaire, tableau ou objet JavaScript.

Essayer:

console.dir(clickEvents);

ou

console.dir(window);

Solution entièrement fonctionnelle basée sur la réponse de Jan Turon - se comporte comme à getEventListeners()partir de la console:

(Il y a un petit bug avec les doublons. Il ne casse pas grand-chose de toute façon.)

(function() {
  Element.prototype._addEventListener = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function(a,b,c) {
    if(c==undefined)
      c=false;
    this._addEventListener(a,b,c);
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(!this.eventListenerList[a])
      this.eventListenerList[a] = [];
    //this.removeEventListener(a,b,c); // TODO - handle duplicates..
    this.eventListenerList[a].push({listener:b,useCapture:c});
  };

  Element.prototype.getEventListeners = function(a){
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(a==undefined)
      return this.eventListenerList;
    return this.eventListenerList[a];
  };
  Element.prototype.clearEventListeners = function(a){
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(a==undefined){
      for(var x in (this.getEventListeners())) this.clearEventListeners(x);
        return;
    }
    var el = this.getEventListeners(a);
    if(el==undefined)
      return;
    for(var i = el.length - 1; i >= 0; --i) {
      var ev = el[i];
      this.removeEventListener(a, ev.listener, ev.useCapture);
    }
  };

  Element.prototype._removeEventListener = Element.prototype.removeEventListener;
  Element.prototype.removeEventListener = function(a,b,c) {
    if(c==undefined)
      c=false;
    this._removeEventListener(a,b,c);
      if(!this.eventListenerList)
        this.eventListenerList = {};
      if(!this.eventListenerList[a])
        this.eventListenerList[a] = [];

      // Find the event in the list
      for(var i=0;i<this.eventListenerList[a].length;i++){
          if(this.eventListenerList[a][i].listener==b, this.eventListenerList[a][i].useCapture==c){ // Hmm..
              this.eventListenerList[a].splice(i, 1);
              break;
          }
      }
    if(this.eventListenerList[a].length==0)
      delete this.eventListenerList[a];
  };
})();

Usage:

someElement.getEventListeners([name]) - retourne la liste des écouteurs d'événement, si le nom est défini, retourne un tableau d'écouteurs pour cet événement

someElement.clearEventListeners([name]) - supprimer tous les écouteurs d'événements, si le nom est défini, supprimer uniquement les écouteurs de cet événement

Opera 12 (pas le dernier moteur Chrome Webkit) Dragonfly a cela depuis un certain temps et est évidemment affiché dans la structure DOM. À mon avis, c'est un débogueur supérieur et c'est la seule raison qui reste pour laquelle j'utilise toujours la version basée sur Opera 12 (il n'y a pas de version v13, v14 et la version v15 Webkit n'a toujours pas Dragonfly)

Prototype 1.7.1 façon

function get_element_registry(element) {
    var cache = Event.cache;
    if(element === window) return 0;
    if(typeof element._prototypeUID === 'undefined') {
        element._prototypeUID = Element.Storage.UID++;
    }
    var uid =  element._prototypeUID;           
    if(!cache[uid]) cache[uid] = {element: element};
    return cache[uid];
}

Je travaillais récemment avec des événements et je voulais voir / contrôler tous les événements dans une page. Après avoir examiné les solutions possibles, j'ai décidé de suivre ma propre voie et de créer un système personnalisé pour surveiller les événements. J'ai donc fait trois choses.

Tout d'abord, j'avais besoin d'un conteneur pour tous les écouteurs d'événements de la page: c'est l' EventListenersobjet. Il dispose de trois méthodes utiles: add(), remove()et get().

Ensuite, je créé un EventListenerobjet de tenir les informations nécessaires à l'événement, à savoir: target, type, callback, options, useCapture, wantsUntrusted, et a ajouté une méthode remove()pour supprimer l'auditeur.

Enfin, j'ai étendu le natif addEventListener()et les removeEventListener()méthodes pour les faire fonctionner avec les objets que j'ai créés ( EventListeneret EventListeners).

Usage:

var bodyClickEvent = document.body.addEventListener("click", function () {
    console.log("body click");
});

// bodyClickEvent.remove();

addEventListener()crée un EventListenerobjet, l'ajoute EventListenerset le renvoie EventListener, afin qu'il puisse être supprimé ultérieurement.

EventListeners.get()peut être utilisé pour afficher les écouteurs dans la page. Il accepte un EventTargetou une chaîne (type d'événement).

// EventListeners.get(document.body);
// EventListeners.get("click");

Démo

Disons que nous voulons connaître tous les écouteurs d'événements dans cette page actuelle. Nous pouvons le faire (en supposant que vous utilisez une extension de gestionnaire de scripts, Tampermonkey dans ce cas). Le script suivant fait ceci:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      https://stackoverflow.com/*
// @grant        none
// ==/UserScript==

(function() {
    fetch("https://raw.githubusercontent.com/akinuri/js-lib/master/EventListener.js")
        .then(function (response) {
            return response.text();
        })
        .then(function (text) {
            eval(text);
            window.EventListeners = EventListeners;
        });
})(window);

Et quand nous listons tous les auditeurs, il est dit qu'il y a 299 auditeurs d'événements. Il semble qu'il y ait des doublons, mais je ne sais pas s'ils sont vraiment des doublons. Tous les types d'événements ne sont pas dupliqués, tous ces «doublons» peuvent donc être un écouteur individuel.

Le code peut être trouvé dans mon référentiel. Je ne voulais pas le poster ici car c'est assez long.

Mise à jour: cela ne semble pas fonctionner avec jQuery. Lorsque j'examine l'EventListener, je vois que le rappel est

function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}

Je crois que cela appartient à jQuery et n'est pas le rappel réel. jQuery stocke le rappel réel dans les propriétés de EventTarget:

$(document.body).click(function () {
    console.log("jquery click");
});

Pour supprimer un écouteur d'événements, le rappel réel doit être transmis à la removeEventListener()méthode. Donc, pour que cela fonctionne avec jQuery, il doit être modifié davantage. Je pourrais résoudre ce problème à l'avenir.

J'essaie de le faire dans jQuery 2.1, et avec la $().click() -> $(element).data("events").click;méthode " " cela ne fonctionne pas.

J'ai réalisé que seules les fonctions $ ._ data () fonctionnent dans mon cas:

	$(document).ready(function(){

		var node = $('body');
		
        // Bind 3 events to body click
		node.click(function(e) { alert('hello');  })
			.click(function(e) { alert('bye');  })
			.click(fun_1);

        // Inspect the events of body
		var events = $._data(node[0], "events").click;
		var ev1 = events[0].handler // -> function(e) { alert('hello')
		var ev2 = events[1].handler // -> function(e) { alert('bye')
		var ev3 = events[2].handler // -> function fun_1()
        
		$('body')
			.append('<p> Event1 = ' + eval(ev1).toString() + '</p>')
			.append('<p> Event2 = ' + eval(ev2).toString() + '</p>')
			.append('<p> Event3 = ' + eval(ev3).toString() + '</p>');        
	
	});

	function fun_1() {
		var txt = 'text del missatge';	 
		alert(txt);
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
</body>

Il existe une belle extension jQuery Events :

( source du sujet )

la modification de ces fonctions vous permettra de connecter les écouteurs ajoutés:

EventTarget.prototype.addEventListener
EventTarget.prototype.attachEvent
EventTarget.prototype.removeEventListener
EventTarget.prototype.detachEvent

lire le reste des auditeurs avec

console.log(someElement.onclick);
console.log(someElement.getAttribute("onclick"));