跳到主要內容

用 Firebug 紀錄網頁 DOM 的所有事件

先說結論(?)
大致上有2種狀況你可能會需要查詢 DOM 被觸發的事件
1.瀏覽器行為變動使你的JavaScript運作不正確
   例如部分行為不再被觸發,或者是事件的優先順序被調整
2.你撰寫的JavaScript中會自行觸發 DOM 事件,而且有問題需要除錯
   例如自行觸發 onchange、onfocus等等

在這些情況下你可能很難判斷問題是由那些事件引發
特別是有部分事件是透過JavaScript引發而非一般輸入(鍵盤、滑鼠)引起的
最好的方式是紀錄該DOM元件中被觸發的所有事件,再依此判斷解決方式

我查過最好的處理方式應該還是透過Firefox的Firebug套件,省掉撰寫測試程式的工

上圖就是Firebug此功能的示意圖
你可以先透過Firebug的選取器選好這次要測試的DOM元件
選好後會看到被選取的原件會顯示為藍底反白
在該區塊按右鍵就會跳出圖片中的選單,選擇紀錄事件->你想紀錄的事件
之後再執行一次操作,就可以看到該元件有那些事件會在操作中被觸發

留言