Obtenir des écouteurs d'événement attachés au noeud à l'aide de addEventListener
J'ai déjà examiné ces questions:
- Comment trouver des écouteurs d'événements sur un nœud DOM lors du débogage ou à partir du code JavaScript?
- Puis-je examiner et modifier par programmation des gestionnaires d’événements Javascript sur des éléments HTML?
- Comment déboguer des liaisons d'événements JavaScript/jQuery avec Firebug (ou un outil similaire)
cependant, aucune d’entre elles ne explique comment obtenir une liste d’écouteurs d’événements attachés à un nœud à l’aide de addEventListener, sans modifier le prototype addEventListener avant la création des écouteurs d’événements.
VisualEvent n'affiche pas tous les écouteurs d'événements (ceux spécifiques à l'iPhone) et je veux le faire (un peu) par programme.
Support de Chrome DevTools, Safari Inspector et Firebug getEventListeners (noeud).
Tu ne peux pas.
Le seul moyen d'obtenir une liste de tous les écouteurs d'événements attachés à un nœud consiste à intercepter l'appel de la pièce jointe à l'écouteur.
Dit
Ajoutez un écouteur d'événement à la liste associée d'écouteurs d'événement avec le type défini sur type, l'écouteur défini sur écouteur et l'ensemble de capture à capturer, sauf s'il existe déjà dans cette liste un écouteur d'événement de même type, écouteur et capture.
Cela signifie qu'un écouteur d'événement est ajouté à la "liste des écouteurs d'événement". C'est tout. Il n'y a aucune notion de ce que cette liste devrait être ni de la façon dont vous devriez y accéder.
Comme il n’existe aucun moyen natif de le faire, voici la solution moins intrusive que j’ai trouvée (n’ajoutez pas de méthodes de prototype anciennes):
var ListenerTracker=new function(){
var is_active=false;
// listener tracking datas
var _elements_ =[];
var _listeners_ =[];
this.init=function(){
if(!is_active){//avoid duplicate call
intercep_events_listeners();
}
is_active=true;
};
// register individual element an returns its corresponding listeners
var register_element=function(element){
if(_elements_.indexOf(element)==-1){
// NB : split by useCapture to make listener easier to find when removing
var elt_listeners=[{/*useCapture=false*/},{/*useCapture=true*/}];
_elements_.Push(element);
_listeners_.Push(elt_listeners);
}
return _listeners_[_elements_.indexOf(element)];
};
var intercep_events_listeners = function(){
// backup overrided methods
var _super_={
"addEventListener" : HTMLElement.prototype.addEventListener,
"removeEventListener" : HTMLElement.prototype.removeEventListener
};
Element.prototype["addEventListener"]=function(type, listener, useCapture){
var listeners=register_element(this);
// add event before to avoid registering if an error is thrown
_super_["addEventListener"].apply(this,arguments);
// adapt to 'elt_listeners' index
useCapture=useCapture?1:0;
if(!listeners[useCapture][type])listeners[useCapture][type]=[];
listeners[useCapture][type].Push(listener);
};
Element.prototype["removeEventListener"]=function(type, listener, useCapture){
var listeners=register_element(this);
// add event before to avoid registering if an error is thrown
_super_["removeEventListener"].apply(this,arguments);
// adapt to 'elt_listeners' index
useCapture=useCapture?1:0;
if(!listeners[useCapture][type])return;
var lid = listeners[useCapture][type].indexOf(listener);
if(lid>-1)listeners[useCapture][type].splice(lid,1);
};
Element.prototype["getEventListeners"]=function(type){
var listeners=register_element(this);
// convert to listener datas list
var result=[];
for(var useCapture=0,list;list=listeners[useCapture];useCapture++){
if(typeof(type)=="string"){// filtered by type
if(list[type]){
for(var id in list[type]){
result.Push({"type":type,"listener":list[type][id],"useCapture":!!useCapture});
}
}
}else{// all
for(var _type in list){
for(var id in list[_type]){
result.Push({"type":_type,"listener":list[_type][id],"useCapture":!!useCapture});
}
}
}
}
return result;
};
};
}();
ListenerTracker.init();
Vous pouvez obtenir tous les événements jQuery à l'aide de $ ._ data ($ ('[sélecteur]') [0], 'événements'); changez [sélecteur] en ce dont vous avez besoin.
Il existe un plugin qui regroupe tous les événements attachés par jQuery et appelé eventsReport.
Aussi j'écris mon propre plugin qui le fait avec un meilleur formatage.
Quoi qu'il en soit, il semble que nous ne puissions pas rassembler les événements ajoutés par la méthode addEventListener. Peut-être pouvons-nous encapsuler l’appel addEventListener pour stocker les événements ajoutés après notre appel encapsulé.
Il semble que le meilleur moyen de voir les événements ajoutés à un élément avec les outils de développement.
Mais vous ne verrez pas les événements délégués là-bas. Nous avons donc besoin de jQuery eventsReport.
MISE À JOUR: MAINTENANT, nous pouvons voir les événements ajoutés par la méthode addEventListener. VOIR LA RÉPONSE À LA DROITE DE CETTE QUESTION.
Je ne trouve pas de moyen de le faire avec du code, mais Firefox 64 en stock, les événements sont répertoriés à côté de chaque entité HTML dans l'inspecteur des outils de développement, comme indiqué sur la page Examine Event Listeners de MDN et comme illustré dans cette image. :
