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

Il dépend de la façon dont les événements sont attachés. Pour illustration présumer nous avons la suite cliquez sur gestionnaire de:

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

Nous allons nous attacher à notre élément à l'aide de différentes méthodes, dont certaines permettent d'inspection et d'autres qui ne le sont pas.

Méthode A) seul gestionnaire d'événements

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 (magasins 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.les données et jQuery.les données)}

Méthode D): Prototype (en désordre)

$(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, inclusive (a été 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 faire)

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

WebKit Inspecteur de Chrome ou les navigateurs Safari maintenant cette. Il affiche les écouteurs d'événement pour un élément du DOM, lorsque vous le sélectionnez dans les Éléments volet.

Utilisation getEventListeners dans Google Chrome:

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

1: Prototype.observe utilise l'Élément.la méthode addEventListener (voir le code source)

2: Vous pouvez remplacer les Element.addEventListener de se rappeler l'ajout d'auditeurs (pratique de la propriété EventListenerList a été retiré de DOM3 spec proposition). Exécutez ce code avant une manifestation est fixé:

(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 remplacer Element.removeEventListener pour supprimer l'événement à partir de la coutume Element.eventListenerList.

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

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

4: ne pas oublier la Element.onclick contenu de l'attribut: ce sont deux choses différentes:

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

Si vous avez besoin de gérer, de trop:

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

L'Événement Visuel bookmarklet (mentionné dans la réponse la plus populaire) seulement s'empare de la bibliothèque personnalisés du gestionnaire de cache:

Il s'avère qu'il n'existe pas de méthode standard fourni par le W3C
recommandé interface DOM pour trouver ce que les écouteurs d'événement sont
attaché à un élément particulier. C'est peut-être un
de surveillance, il a été proposé d'inclure une propriété appelée
eventListenerList pour le niveau 3 DOM cahier des charges, mais a été
malheureusement été supprimée dans les projets ultérieurs. En tant que tel, nous sommes forcés de
regarda l'individu bibliothèques Javascript, qui sont généralement
maintenir un cache des événements attachés (de sorte qu'ils peuvent être enlevé plus tard et
effectuer d'autres abstractions).

En tant que tel, afin de Visual Événements pour afficher les événements, il doit être capable de
analyser l'information de l'événement d'une bibliothèque Javascript.

Élément primordial est peut-être discutable (c'est à dire parce qu'il y a certains DOM fonctionnalités spécifiques comme les collections vivantes, qui ne peut pas être codé en JS), mais il donne l'eventListenerList support en natif et il fonctionne dans Chrome, Firefox et Opera (ne fonctionne pas sous IE7).

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

Pleinement solution de travail basé sur réponse de Jan Turon - se comporte comme getEventListeners() à partir de la console:

(Il y a un petit bug avec les doublons. Il ne rompt pas beaucoup 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];
};
})();

Utilisation:

someElement.getEventListeners([name]) - retour liste des écouteurs d'événement, si le nom est de retour tableau des auditeurs pour cet événement

someElement.clearEventListeners([name]) - supprimer tous les écouteurs d'événement, si le nom est situé à seulement supprimer les auditeurs pour l'événement

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 suis en train de le faire en jQuery 2.1, et avec le "$().click() -> $(element).data("events").click;" méthode ne fonctionne pas.

J'ai réalisé que seul le $._data() fonctions fonctionne dans mon cas :

JS:

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

HTML:

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

la modification de ces fonctions vous permettent de vous connecter aux auditeurs ajouté:

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

lire le reste de l'auditoire avec

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