在js中詳細介紹幾種類型的事件處理程序的方式

事件就是使用者或瀏覽器本身執行的某種動作，如click,laod,mouseover都是事件的名稱。

事件流描述的是從頁面中接收事件的順序。

事件處理程序就是對事件做出回應的函數。事件處理程序的名字以「on」開頭，如click事件對應的事件處理程序的名稱為onclick。

為事件指定處理程序的方式有多種，如：HTML事件處理程序、DMO0級事件處理程序、DOM2級事件處理程序、IE事件處理程序、跨瀏覽器事件處理程序。

（1）html事件處理程序

即：將事件處理程序，寫在對應的html標籤中。

eg:

<input type="button" value="click me" onclick="alert("hello")" />

缺點：①存在一個時間差，當使用者在html元素一出現在頁面上就去觸發對應的事件時，事件的處理程序可能還不具備執行條件（比如說呼叫的函數還木有被解析），就會引發錯誤。 eg:

<input type="button" value="click me" onclick="message()" />

<script type="text/javascript">function message(){alert("hello world");}</script>

因為呼叫的函數處於按鈕的下方，如果在message函數被載入之前就點擊了按鈕就會引發錯誤。

②html和js程式碼耦合度太高，如果要改變事件處理程序，就要改動兩個地方：html程式碼和javascript程式碼。

（2）DMO0級事件處理程序

eg:
var btn=document.getElementById("myBtn");
  btn.onclick=function(){alert(this.id)};

注意：如果這段程式碼位於按鈕之後，就有可能在一點時間內怎麼點擊都木有反應，因為在這段程式碼運行以前不會指定事件處理程序。

DMO0級事件處理程序被認為是元素的方法，換句話說，DMO0級事件處理程序是在元素的作用域中運行的，所以程式中的this引用當前元素。可以在事件處理程序中透過this存取元素的任何屬性和方法。

以這種方式新增的事件處理程序會在事件流的冒泡階段被處理。

也可刪除指定的事件處理程序，只要將事件處理程序的屬性設為null就Ok了。

eg:
btn.onclick=null;将处理程序设置为null以后，再点击按钮不会发生任何动作。

（3）DOM2級事件處理程序

DOM2級事件定義了兩個方法，用於指定和刪除事件處理程序。這兩個運算分別為：addEventListener()和removeEventListner().所有的DOM節點都包含這兩個方法。他們要接受3個參數，分別為：要處理的事件名，處理函數，布林值。最後的布林值參數如果為ture,表示在捕獲階段處理程序，如果為false，表示在冒泡階段呼叫事件處理程序。

例如在按鈕上為click新增事件處理程序，可以用下面的程式碼：

var btn=document.getElementById("myBtn");
btn.addEventListner("onclick",function(){alert("hello world");false});这里添加的事件处理程序也是依附于元素的的作用域

使用DOM2事件處理程序的優點是：可以為同一個元素新增多個事件處理程序。

例：var btn=getElementById("myBtn");
btn.addEventListner("click",function(){alert(this.id);},flase);
btn.addEventListner("click",function(){alert("hello world");},flase);

結果：先顯示id，後顯示hello world。

透過addEventListner()新增的事件處理程序只能透過removeEventListner來刪除。移除時使用的參數與新增事件處理程序的參數相同。另：透過addEventListner新增的匿名函數無法刪除。

（4）IE事件處理程序。

IE新增和刪除事件處理程序的函數分別為：attachEvent()和detachEvent();這兩個函數接收相同的兩個參數：事件處理程序名稱與事件處理函數。由於IE只支援事件冒泡，所以透過attachEvent新增的事件處理程序都會加入到冒泡階段。

例如：var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("hello world");});

IE在使用attachEvent方法的情況下，事件處理程序的作用域為全域作用域，因此this等於window。 （在編寫跨瀏覽器的程式碼時，記住這一點非常重要）。

與addEventListner類似，attachEvent()方法也可以用來為一個元素添加多個事件處理程序；

eg:
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("clicked");});
btn.attachEvent("onclick",function(){alert("hello world");});

值得注意的是：這些事件的處理程序是按逆序觸發的，也就是說，先彈出hello world 再彈出clicked。

detach()使用方法略。

（5）跨瀏覽器的事件處理程序

為了以跨瀏覽器的方式處理事件，主要可以使用兩個方法：

①使用能隔離瀏覽器差異的js函式庫。

②自己寫最適合的事件處理方法。這裡要用到能力檢測，即：辨識瀏覽器的能力。要確保程式碼能在大多數瀏覽器下一致的運行，只須專注於冒泡階段。

程式碼步驟如下：首先要建立的方法是addHandler(用於處理跨瀏覽器的兼容性問題，這裡沒有給出具體程式碼),它的職責是視情況判定使用DOM0級方法，DOM2級方法，IE方法來新增事件。 addHandler接收3個參數：要操作的元素、事件名稱、事件處理程序函數。這個方法屬於一個名叫EventUtil的物件。這裡使用這個物件來處理瀏覽器之間的差異。

與addHandler對應的方法是removeHandler(),它也接受相同的參數。這個事件的職責是移除先前新增的事件處理程序。不論事件是以什麼方式添加到物件中的，如果其他方法程序無效，則預設使用DOM0級方法。

使用EventUtil的方法如下：var btn=document.getElementById("myBtn");
var hander=function(){alert("hello")};//事件处理程序
EventUtil.addHandler(btn,"onclick",handler);
//其他代码
EventUtil.removeHandler(btn,"onclick",handler);
addHandler()和removeHandler()没有考虑到所有的浏览器问题，例如IE中作用域的问题，但是使用它们添加和移除事件处理程序还是足够了。

上面是我整理给大家的在js中详细介绍几种类型的事件处理程序的方式，希望今后会对大家有帮助。

相关文章：

重点解答动态加载JS脚本，一语道破

javascript中遍历EL表达式List集合中的值

如何在3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0标签中一样可以使用el表达式

以上是在js中詳細介紹幾種類型的事件處理程序的方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！