http://web.jobbole.com/82503/
Javascript中的事件經常被認為如謎一般不可解。Javascript是一個事件驅動的語言，在這樣的前提下前面的看法是很奇怪，但是說到它們的復雜本質和調試難度時，這樣的看法又是很正常的。為此，我創建了可視化事件（Visual Event）來查看DOM節點上綁定的事件。
簡介
Visual Event是一個開源 Javascript 書簽，能提供綁定在DOM元素上的事件調試信息。Visual Event能顯示如下信息：
1、哪一個元素有事件綁定
2、某元素上綁定的事件類型
3、事件觸發后運行的代碼段
4、定義綁定函數的源文件和行號（僅限於WebKit和Opera瀏覽器）
除了對調試你自己的代碼大有用途，Visual Event還能被用作教學工具，顯示發起了多少網站。
Visual Event是開源軟件（GPLv2），並且在GitHub上有一個Git倉庫目錄，供你去提交或照你所想的去修改
安裝
由於Visual Event是一個小書簽，所以在任何網頁上安裝和運行它都很簡單：
1、拖拽右側的“Visual Event”鏈接到你的書簽欄上：Visual Event
2、載入一個使用了瀏覽器所能支持的js庫的網頁
3、點擊書簽欄中的“Visual Event”
4、查看綁定在文檔元素上的事件處理器
自動載入的Visual Event例子在這里有提供。這個例子使用Data Tables創建了一個不同元素上綁定了許多事件的測試頁面。
它是如何工作的
W3C 沒有提供標准的方法推薦能發現特定元素上綁定事件的DOM接口。盡管這似乎是個疏忽，也有一個建議方法能將3級DOM規范的 eventListenerList 屬性包含進來，但很不幸的是，在后來的草案中這個方法被移除了。因此，我們不得不研究獨立的通常能維護一個事件的高速緩存的Javascript庫（所以它們能在后來被移除並執行其他有用的抽象化）。
因此，Visual Event為了能顯示事件，它必須能夠從 JS 庫中解析出事件信息。目前Visual Event能支持的庫有如下這些：
- DOM 0 events
- jQuery 1.2+
- YUI 2
- MooTools 1.2+
- Prototype 1.6+
- Glow
- ExtJS 4.0.x
如何參與
Visual Event是個開源軟件，在GPLv2證書下可以獲得。通過Git實現開源控制，而且該項目在GitHub 上有一個網頁。事實上任何對Visual Event的提高有幫助的建議都是十分受歡迎的！如果你遇到什么問題，請在 GitHub上將你遇到的問題作為討論（issue）展開，包括出現問題的網頁鏈接地址。Fork代碼以及合並分支（pull request）也同樣被鼓勵！
你可能有一個很感興趣的地方，就是如何能添加對額外Javascript庫的支持。關鍵是能夠獲取到該庫使用的事件緩存，因為沒有事件緩存就不可能知道哪個節點有事件以及綁定代碼。
VisualEvent類有一個靜態數組叫做“VisualEvent.parsers”，它是一個函數的數組——想增加一個新的解析器，只需要將你的函數加到這個數組里。這個函數必須返回一個帶有以下參數的javascript對象數組：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
[
{
"node": {element}, // The DOM element that has attached events
"listeners": [ // Array of attached events
{
"type": {string}, // The event type - click, change, keyup etc
"func": {string}, // The code that will handle the event, from Function.toString()
"removed": {boolean}, // If the event has been removed or not (typically will be false, but used if the library doesn't remove the event from its cache)
"source": {string} // Library name and version that attached the event (e.g. "jQuery 1.7")
},
...
]
},
...
]
|
建立Visual Event
為了能運行本地的Visual Event副本，你必須先建立一個Visual Event，因為這個過程會有文件級聯操作，即將庫中的解析器移動到主文件中。建立的過程中還同時會建立 JSDoc文 檔並壓縮 JS 文件（除非是調試生成的）。
為了建立Visual Event，你在終端只需要一個能運行bash腳本並能輸入“./build .sh debug”命令的系統。這會在建立Visual Event和正確的載入器的目錄中的“builds”目錄里創建一個新目錄（注意時間戳是用於防止開發和部署過程中boolmarklet的緩存問題）。以下是建立過程的腳本的使用實例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
Visual Event build script - usage:
./build.sh [loader-dir] [debug]
loader-dir - The web-address of the build files. Note that the build
directory name is automatically appended. For example:
localhost/VisualEvent/builds - default if no option is provided
sprymedia.co.uk/VisualEvent/builds
debug - Debug indicator. Will not compress the Javascript
Example deploy build:
./build.sh sprymedia.co.uk/VisualEvent/builds
Example debug build:
./build.sh localhost/VisualEvent/builds debug
|
文件“bookmarklet.html”是為了使你能方便地建立你自己的書簽載入器。通常你只需要修改書簽的路徑地址。鏈接會在每次按鍵時更新，你只需要像你安裝其他書簽插件一樣去安裝它。