Visual Event ：快速檢視 DOM 上系結的 JS 事件

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物件陣列：

[
   {
       "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的快取問題）。以下是建立過程的指令碼的使用實體：

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

原文出處：www.sprymedia.co.uk

譯文出處：伯樂線上 – fzr

連結：http://web.jobbole.com/82503/

---