事件就是用戶或浏覽器自身執行的某種動作。比如說click,mouseover，都是事件的名字。而相應某個事件的函數就叫事件處理程序（或事件偵聽器）。為事件指定處理程序的方式有好幾種。
一：HTML事件處理程序。 如:
復制代碼 代碼如下:
<script type="text/javascript">
function show(){
alert('hello world!');
}
</script>
<input type="button" value="click me" onclick="show()"/>
相信這種方式是目前咱們大家用得比較多的一種，但是在html中指定事件處理程序有兩個缺點。
(1)首先：存在一個時差問題。就本例子來說,假設show()函數是在按鈕下方，頁面的最底部定義的，如果用戶在頁面解析show()函數之前就單擊了按鈕，就會引發錯誤；
(2)第二個缺點是html與javascript代碼緊密耦合。如果要更換時間處理程序，就要改動兩個地方：html代碼和javascript代碼。
因此，許多開發人員摒棄html事件處理程序，轉而使用javascript指定事件處理程序。
二：Javascript指定事件處理程序
javascript指定事件處理程序包括三種方式：
(1):DOM0級事件處理程序
如：
復制代碼 代碼如下:
var btn=document.getElementById("mybtn"); //取得該按鈕的引用
btn.onclick=function(){
alert('clicked');
alert(this.id); // mybtn
以這種方式添加的事件處理程序會在事件流的冒泡階段被處理。
刪除DOM0級方法指定的事件處理程序：
btn.onclick=null; // 刪除事件處理程序
}
(2):DOM2級事件處理程序
DOM2級事件定義了兩個方法，用於處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()。所有DOM節點中都包含這兩個方法，並且它們都接受3個參數：要處理的事件名，做為事件處理程序的函數和一個布爾值。最後這個參數如果是true,表示在捕獲階段調用事件處理程序；如果是fasle,表示在冒泡階段調用事件處理程序。
如：
復制代碼 代碼如下:
var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
使用DOM2級事件處理程序的主要好處是可以添加多個事件處理程序。
如：
復制代碼 代碼如下:
var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.addEventListener("click",function(){
alert("hello world!");
},false);
這裡為按鈕添加了兩個事件處理程序。這兩個事件處理程序會按照它們的順序觸發。
通過addEventListener()添加的時間處理程序只能使用removeEventListener()來移除，移除時傳入的參數與添加時使用的參數相同。這也意味著通過addEventListener()添加的匿名函數將無法移除。
如：
復制代碼 代碼如下:
var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
//移除
btn.removeEventListener("click",function(){ //這樣寫沒有用 （因為胃第二次與第一次相比是一個完全不同的函數）
alert(this.id);
},false);
解決辦法：
復制代碼 代碼如下:
var btn=document.getElementById("mybtn");
var hander=function(){
alert(this.id);
};
btn.addEventListener("click",hander,false);
btn.removeEventListener("click",hander,false); // 有效
注意：這裡我們的第三個參數都是false,是在冒泡階段添加的。大多數情況下，都是就事件處理程序添加到事件流的冒泡階段，這樣可以最大限度的兼容各種浏覽器。
三：IE事件處理程序
IE實現了與DOM中類似的兩個方法:attachEvent()和detachEvent()。這兩個方法接受相同的兩個參數：事件處理程序名稱和事件處理程序函數。由於IE只支持時間冒泡，所有通過attachEvent()添加的事件處理程序都會被添加包冒泡階段。
如：
三：
復制代碼 代碼如下:
var btn=document.getElementById("mybtn");
btn.attachEvent("onclick",function(){
alert("clicked");
})
注意：attachEvent()函數的第一個參數是"onclick"，而非DOM的addEventListener()中的"click"。
attachEvent()方法也可以用來為一個元素添加多個事件處理程序。
如：
復制代碼 代碼如下:
var btn=document.getElementById("mybtn");
btn.attachEvent("onclick",function(){
alert("clicked");
});
btn.attachEvent("onclick",function(){
alert("hello world!");
});
這裡調用了兩次attachEvent(),為同一個按鈕添加了兩個不同的事件處理程序。不過，與DOM方法不同的是，這些事件處理程序不是以它們的添加順序執行，而是以相反的順序被觸發。單擊這個例子中的按鈕：首先看到的是"hello world",然後才是"clicked".
使用attachEvent()添加的事件可以通過detachEvent()來移除，條件是必須提供相同的參數。
復制代碼 代碼如下:
var btn=document.getElementById("mybtn");
var hander=function(){
alert("clicked");
}
btn.detachEvent("onclick",hander}); // 移除
以上三種方式為目前的主要的事件處理程序方式，那看到這裡你肯定會想到，既然不同的浏覽器會有不同的差異，那怎麼保證跨浏覽器的事件處理程序呢？
為了以跨浏覽器的方式處理事件，不少的開發人員是使用能夠隔離浏覽器差異性的Javascript庫，還有一些開發人員會自己開發最合適的事件處理方法。
這裡提供一個EventUtil對象,可以用這個對象來處理浏覽期間的差異：
復制代碼 代碼如下:
var EventUtil = {
addHandler: function(element, type, handler){ // 該方法接受3個參數：要操作的元素，事件名稱和事件處理程序函數
if (element.addEventListener){ //檢查傳入的元素是否存在DOM2級方法
element.addEventListener(type, handler, false); // 若存在，則使用該方法
} else if (element.addEvent){ // 如果存在的是IE的方法
element.attachEvent("on" + type, handler); //則使用IE的方法，注意，這裡的事件類型必須加上"on"前綴。
} else { // 最後一種可能是使用DOM0級
element["on" + type] = hander;
}
},
removeHandler: function(element, type, handler){ // 該方法是刪除之前添加的事件處理程序
if (element.removeEventListener){ //檢查傳入的元素是否存在DOM2級方法
element.removeEventListener(type, handler, false); // 若存在，則使用該方法
} else if (element.detachEvent){ // 如果存在的是IE的方法
element.detachEvent("on" + type, handler); //則使用IE的方法，注意，這裡的事件類型必須加上"on"前綴。
} else { // 最後一種可能是使用DOM0及方法(在現代浏覽器中，應該不會執行這裡的代碼)
element["on" + type] = null;
}
}
};
可以像下面這樣使用EventUtil對象:
復制代碼 代碼如下:
var btn =document.getElementById("mybtn");
var hander= function(){
alert("clicked");
};
//這裡省略了部分代碼
EventUtil.addHandler(btn,"click",hander);
//這裡省略了部分代碼
EventUtil.removeHandler(btn,"click",hander); //移除之前添加的事件處理程序
可見，使用addHandler和removeHandler來添加和移除事件處理程序還是很方便的。