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




javascript event listener list (11)

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's Event.observe ;
  2. AddEventListener de DOM;
  3. Comme élément element element.onclick .

(Réécrire la réponse à cette question, car c'est pertinent ici.)

Lors du débogage, si vous voulez juste voir les événements, je 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 "Auditeurs d'événements" en bas à droite (similaire dans Firefox)

Si vous souhaitez utiliser les événements de 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, l' utilisation de $ ._ data n'est pas recommandée, sauf pour le 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.


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

2: Vous pouvez remplacer Element.addEventListener pour vous souvenir des écouteurs ajoutés (la propriété pratique EventListenerList été supprimée 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 du Element.eventListenerList personnalisé.

3: la propriété Element.onclick nécessite un soin particulier ici:

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

4: ne pas oublier l' Element.onclick contenu Element.onclick : 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'existe pas de méthode standard fournie par l'interface DOM recommandée par le W3C pour savoir quels écouteurs d'événement sont attachés à un élément particulier. Bien que cela puisse sembler être un oubli, il a été proposé d'inclure une propriété appelée eventListenerList à la spécification DOM de niveau 3, mais elle a malheureusement été supprimée dans les versions ultérieures. En tant que tels, nous sommes obligés de regarder les bibliothèques Javascript individuelles, qui conservent généralement un cache des événements attachés (afin qu'ils puissent ensuite être supprimés et effectuer d'autres abstractions utiles).

Ainsi, 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é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 ).




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


Opera 12 (pas le dernier moteur basé sur Chrome Webkit) Dragonfly a eu cela pendant 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 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 de Webkit manque toujours de Dragonfly)


Si vous avez Firebug , 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);

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;


Utilisez getEventListeners dans Google Chrome :

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

Vous pouvez envelopper les méthodes DOM natives 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


Il est possible de lister tous les écouteurs d'événement en JavaScript: ce n'est pas si difficile; il suffit de pirater la méthode du prototype 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});
};

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





dom