Visual Event會透過將javascript語法，注入到頁面的方式，取得每個element所綁定的事件。如果是常常include很多library時，或者寫一些比較複雜ui，可透Visual Event檢視綁定element上的event正不正確，方便除錯。

執行流程如下：

將以下script，加入到書籤的網址欄位：

javascript:(function()%20{var%20url%20=%20'//www.sprymedia.co.uk/VisualEvent/VisualEvent_Loader.js';if(%20typeof%20VisualEvent!='undefined'%20)%20{if%20(%20VisualEvent.instance%20!==%20null%20)%20{VisualEvent.close();}else%20{new%20VisualEvent();}}else%20{var%20n=document.createElement('script');n.setAttribute('language','JavaScript');n.setAttribute('src',url+'?rand='+new%20Date().getTime());document.body.appendChild(n);}})();

然後在選擇你要測試的頁面，執行剛剛加入的書籤，或將以上script貼到網址列，再按enter，就能偵測到綁定的event：

目前support的library如下：

• DOM 0 events
• jQuery 1.2+
• YUI 2
• MooTools 1.2+
• Prototype 1.6+
• Glow
• ExtJS 4.0.x

注入的方式其實就是透過書籤、網址列可以執行javascript特性，當你點擊書籤時，就會執行script，將程式load當前頁面。在網址列執行script範例，如下：

//將以下程式碼貼到網址列按enter，就可以執行js語法
javascript:alert(3);

至於偵測event的實作，大致上是將每個element上的attribute掃過，還有針對不同library綁定event方式去處理，最後將ui呈現畫面上。