协慌网

我有一个页面，其中一些事件监听器附加到输入框和选择框。有没有办法找出哪些事件监听器正在观察特定的 DOM 节点以及哪些事件？

事件附件使用：

1. Prototype 的 Event.observe ;
2. DOM 的addEventListener ;
3. 作为元素属性element.onclick 。

如果您只需要检查页面上发生的情况，可以尝试使用Visual Event书签。

更新 ： 视觉事件 2可用;

这取决于事件的附加方式。为了说明，我们有以下点击处理程序：

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

Chrome，Firefox，Vivaldi 和 Safari 在其开发人员工具控制台中支持getEventListeners(domElement) 。

对于大多数调试目的，可以使用它。

以下是使用它的非常好的参考： https ： //developers.google.com/chrome-developer-tools/docs/commandline-api#geteventlistenersobject