grence's program note

之前文章描述過 JavaScript查看事件內容的方式，http://www.dotblogs.com.tw/grence/archive/2011/07/26/32139.aspx，除了瀏覽器開發者工具，還有一個不錯的工具：Visual Event(git)：「…there was a proposal to include a property called eventListenerList to the level 3 DOM specification, but was unfortunately been removed in later drafts. As such we are forced to looked at the individual Javascript libraries, which typically maintain a cache of attached events…」

JavaScript事件大概有幾種綁定方法：

1. html行內宣告 <element onclick="(function(){...})()" />
2. element.onclick = function(){...}
3. element.addEventListener("eventType", function(){...}, capture)
4. 再加上常用的 jQuery定義的方式

以上幾點，寫了簡單的 demo：

第 1種方式要查看事件內容沒有太大的問題

第 2種方式用瀏覽器開發者工具或 VisualEvent都很容易看到

第 3種方式只能用瀏覽器開發者工具，VisualEvent無效

第 4種方式開發者工具看到的是 jQuery底層的呼叫內容，VisualEvent只能在舊一點的 jQuery版本(<1.3 ?)才有用，新一點的版本可以看 $("element").data("events").click[0].handler的內容，再詳細的說明可參考 http://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node下的回答