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

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

使用如下事件附加事件：

1. 原型的 Event.observe ;
2. DOM的addEventListener ;
3. 做为元素属性element.onclick 。

---

#1楼

（因为此问题很重要，所以请重写此问题的答案。）

调试时，若是您只想查看事件，我建议...

1. 视觉事件
2. Chrome开发人员工具的“ 元素”部分：选择一个元素，而后在右下角查找“事件监听器”（与Firefox相似）

若是要在代码中使用事件，而且正在使用1.8以前的 jQuery，则可使用：

$(selector).data("events")

获得事件。 从1.8版本开始，再也不使用.data（“ events”） （请参阅此bug票据 ）。 您可使用：

$._data(element, "events")

另外一个示例：在指向控制台的特定连接上写入全部click事件：

var $myLink = $('a.myClass');
console.log($._data($myLink[0], "events").click);

（有关工做示例，请参见http://jsfiddle.net/HmsQC/ ）

不幸的是，除调试外， 不建议使用$ ._ data ，由于它是内部jQuery结构，而且在之后的版本中可能会更改。 不幸的是，我知道没有其余简单的方法能够访问事件。

---

#2楼

原型1.7.1方式

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];
}

---

#3楼

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

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

如下是使用它的很好参考： https : //developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners

---

#4楼

若是您拥有Firebug ，则可使用console.dir(object or array)在任何JavaScript标量，数组或对象的控制台日志中打印一棵漂亮的树。

尝试：

console.dir(clickEvents);

要么

console.dir(window);

---

#5楼

Opera 12（不是基于最新的Chrome Webkit引擎的） Dragonfly已经有一段时间了，而且显然显示在DOM结构中。 在我看来，它是出色的调试器，也是我仍然使用基于Opera 12的版本的惟一缘由（没有v13，v14版本，而基于v15 Webkit的版本仍然缺乏Dragonfly）