Как найти слушателей событий на узле DOM при отладке или из кода JavaScript?

Это зависит от того, как события присоединяются. Поскольку иллюстрация предполагает, что у нас есть следующий обработчик щелчков:

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

Мы собираемся присоединить его к нашему элементу с помощью различных методов, некоторые, которые позволяют контроль и некоторых, которые не делают.

Метод A) единственный обработчик событий

element.onclick = handler;
// inspect
alert(element.onclick); // alerts "function() { alert('clicked!') }"

Метод B) несколько обработчиков событий

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

Метод 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 (хранит обработчик в объекте)

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

<глоток> (См. jQuery.fn.data и jQuery.data )

Метод D): Прототип (грязный)

$(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, включительно (стал очень трудным здесь)

  // 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 (немного лучше)

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

Если у вас есть Firebug , вы можете использовать console.dir (объект или массив) для печати красивого дерева в журнале консоли любого скаляра, массива или объекта JavaScript.

Попробуйте:

console.dir(clickEvents);

или

console.dir(window);