Comment trouver les écouteurs d'événement sur un noeud DOM?

Question

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. En tant qu'attribut d'élément element.onclick .

Answer 1

Chrome prend en charge les getEventListeners sur un nœud.

Pour la plupart 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

Answer 2

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;

Answer 3

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.

La 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

La 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.data et jQuery.data)}

La 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!') }"
  })
  

Answer 4

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.

Answer 5

Il est possible d’énumérer tous les écouteurs d’événements en JavaScript : il n’est pas difficile ; Il suffit d’entailler la `` de la méthode des éléments HTML (avant d’ajouter les auditeurs).

Maintenant chaque élément d’ancrage ( ) aura une propriété qui contient tous ses auditeurs. Et il fonctionne même pour enlever les écouteurs avec fonctions anonymes.