在調試時或從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）