利用物件的方式設定事件

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

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

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

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

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

原始碼

1. /* 取得所有名稱為 s_but 的物件群組 */ 
2. var spanButtons = document.getElementsByName("s_but"); 
3.  
4. /* 設定群組中每一個物件的事件 */ 
5. for (var i = 0; i < spanButtons.length; i++) { 
6. /* 設定當滑鼠按下時的事件函數 */ 
7. spanButtons[i].onmousedown = downChange; 
8. /* 設定當滑鼠重疊時的事件函數 */ 
9. spanButtons[i].onmouseover = overChange; 
10. /* 設定當滑鼠離開時的事件函數 */ 
11. spanButtons[i].onmouseout = outChange; 
12. } 
13.  
14. /*Down Change*/ 
15. function downChange(){ 
16. this.style.borderStyle = "inset"; 
17. this.style.backgroundColor = "#EEDDDD"; 
18. } 
19.  
20. /*Out Change*/ 
21. function outChange(){ 
22. this.style.borderColor = ""; 
23. this.style.borderStyle = "outset"; 
24. this.style.backgroundColor = "#FFFFFF"; 
25. } 
26.  
27. /*Over Change*/ 
28. function overChange(){ 
29. this.style.borderColor = "#FF0000"; 
30. } 

/* 取得所有名稱為 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";
}

檔案連結