利用物件的方式設定事件

這是我第一次使用物件的方式設定事件處理，以前都是用 HTML 去處理事件的呼叫，在利用 JavaScript 將表格模擬成按鈕中就是用這種模式去運作的，那麼用物件去設定有什麼好處呢？

第一用這個方法去處理的話，可以減少網頁檔案的大小，也減少 HTML 上的複雜度，讓網頁有更好的結構感，使 HTML 更容易閱讀，且更容易撰寫。

第二對於大量使用相同的事件有更好處理，重複使用性高，將程式碼獨立成個體的文件，只要在適當的位址中載入，就能重複使用相同的程式碼。

第三對於事件的新增及修改有更大的靈活度，不必在新增事件時要去改每個物件的 HTML，可以統一管理相同物件的新增及修改。

所以在大量使用相同程式碼時，這是一個不錯的選擇。

/* 取得所有名稱為 s_but 的物件群組 */
var spanButtons = document.getElementsByName("s_but");

/* 設定群組中每一個物件的事件 */
for (var i = 0; i < spanButtons.length; i++) {
/* 設定當滑鼠按下時的事件函數 */
spanButtons[i].onmousedown = downChange;
/* 設定當滑鼠重疊時的事件函數 */
spanButtons[i].onmouseover = overChange;
/* 設定當滑鼠離開時的事件函數 */
spanButtons[i].onmouseout = outChange;
}

/*Down Change*/
function downChange(){
this.style.borderStyle = "inset";
this.style.backgroundColor = "#EEDDDD";
}

/*Out Change*/
function outChange(){
this.style.borderColor = "";
this.style.borderStyle = "outset";
this.style.backgroundColor = "#FFFFFF";
}

/*Over Change*/
function overChange(){
this.style.borderColor = "#FF0000";
}

檔案連結