如何在调试时或从JavaScript代码查找DOM节点上的事件侦听器？

 

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

活动使用：

  • Prototype的Event.observe ;
  • DOM的addEventListener ;
  • 作为元素属性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

    链接地址: http://www.djcxy.com/p/83427.html

    上一篇: How to find event listeners on a DOM node when debugging or from the JavaScript code?

    下一篇: Sass watch is detecting changes but not compiling to css