2007-09-19

利用物件的方式設定事件

這是我第一次使用物件的方式設定事件處理,以前都是用 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";
}
檔案連結

0 回應: