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”是為了使你能方便地建立你自己的書籤載入器。通常你只需要修改書籤的路徑地址。連結會在每次按鍵時更新，你只需要像你安裝其他書籤外掛一樣去安裝它。