日常的網頁開發調試工作中，經常需要知道指定的某個網頁元素綁定了哪些事件以及綁定代碼的位置，下面介紹三種用來跟蹤頁面中的事件的方法。
1、使用firefox調試
我們可以使用firefox的debug工具，找到指定元素，然后查看事件面板
2、使用chrome調試
在要檢查的元素上單擊右鍵選擇查看元素，然后，右邊的面板中會顯示style標簽，切換到EventListenrs標簽，可以看到相關的事件綁定信息。點擊最右邊的文件名稱還可以跳轉到事件定義代碼在腳本文件中的位置。不過這種方法並非總是可用，下面會提到。
3、使用 Chrome Web Store 中 Visual Event 檢查事件綁定信息
上面的兩種方法，當我們定位定義事件的代碼位置時，如果我們使用了JS庫（比如jquery）的話調試工作又會變得復雜，程序往往會把我們引導到jquery庫中，這樣的話仍然是不方便找到在哪個文件的那個行中addEventListener了事件。這個時候就需要 Visual Event 閃亮登場了……
安裝完 Visual Event 后，工具條上會有 Visual Event 的圖標。然后打開我們要調試的頁面，在工具欄上點擊他那個火眼金睛一樣的眼睛圖標，網頁上所有綁定了事件的 HTML 元素都會由一個半透明的藍色遮罩層覆蓋，鼠標移動到相應的元素上即可看到事件綁定信息。
剛才說了，在使用了Js 庫的時候，visual event 依然很好用，下面列出它支持的幾個庫的名字及版本信息：
- DOM 0 events
- jQuery 1.2.x +
- YUI 2.6.x (2.x might work!)
- MooTools 1.2.x
- Prototype 1.6.x
- JAK (Events 2.2)
- Glow
獲取 Visual Event
VisualEvent 在GitHub上的位置 ：https://github.com/DataTables/VisualEvent
VisualEvent 在Chrome webstore 上的位置：https://chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim
本文參考資料
http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/
http://www.sprymedia.co.uk/article/Visual+Event