javascript事件處理函式繫結簡單介紹

本章節介紹一下javascript關於事件處理函式註冊的一些事情，希望能夠給需要的朋友帶來幫助。

一.寫在html標籤中:

此種方式在當前還是有大量使用的，雖然不推薦使用此方式，因為比較簡單方方便，關於它的缺點最後介紹。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<input type="button" value="檢視效果"/>

當點選此按鈕的時候就會執行函式func()。

主要缺點如下:

1.無法對一個事件註冊多個事件處理函式，前面的會被後面的覆蓋。

2.是一種過時的註冊事件處理函式方式，不推薦使用。

二.當前推薦的事件處理函式註冊:

當前W3C標準中是使用addEventListener()和removeEventListener()函式註冊和刪除事件處理函式，當前的IE8以上瀏覽器和火狐、谷歌等標準瀏覽器都支援，但IE8和IE8以下瀏覽器不支援這兩個函式，要使用attachEvent()和detachEvent()函式實現註冊和刪除功能。

程式碼封裝如下:

[JavaScript] 純文字檢視 複製程式碼
function addEvent(obj,type,fn){ 
  if(typeof obj.addEventListener != 'undefined'){ 
    obj.addEventListener(type,fn,false); 
  }
  else if(obj.attachEvent != 'undefined'){ 
    obj.attachEvent('on' + type,function(){
      fn.call(obj,window.event); 
    }); 
  } 
};

下面對程式碼需要注意的幾點做一下說明:

1.addEventListener函式的時候事件名稱不需要加"on"，而attachEvent則需要加"on"。

2.之所以使用call這是因為attachEvent()函式註冊的事件處理函式中的this並不是指向obj的，而是指向window。上面程式碼的問題:

IE8和IE8以下中，由於註冊的是匿名函式，所以刪除是個問題，同時無法無法按照順序執行事件處理函式。

解決方案:

1.新增是使用javascript的雜湊表儲存物件事件，為每一個物件事件分配一個ID值，按新增的呼叫順序，先判斷是否存在相同的處理函式，不存在的話就依次將事件繫結函式新增到雜湊表中，這樣解決了無法順序執行以及重複新增的問題

2.刪除時進行遍歷函式匹配的判斷，存在則刪除。

上面的解決方案是針對IE8和IE8以下瀏覽器的。