相應某個事件的函式叫做事件處理程式（或事件偵聽器）。

1、TTML事件處理程式

<script type="text/javascript">
    function showMessage() {
        alert('hello world!');
    }
</script> 
<input type="button" value="Click Me" onclick="showMessage()">

缺點：

1.存在一個時差問題

2.這樣擴充套件事件處理程式的作用域在不同的瀏覽器中會導致不同結果

           3.HTML與JavaScript程式碼緊密耦合

2、DOM0級事件處理程式

將一個函式複製給一個事件處理程式屬性，使用DOM0級事件處理程式被認為是元素的方法。

var btn=document.getElementById('myBtn');
btn.onclick=function () {
    alert('Clicked');
}

3、DOM2級事件處理程式

指定事件處理程式：addEventListener()，刪除事件處理程式：removeEventListener()

接收三個引數：要處理的事件名、作為事件處理程式的函式和一個布林值。最後一個布林值引數如果是true，表示在捕獲階段呼叫事件處理程式；如果是false，表示在冒泡階段呼叫。

新增事件處理程式

var btn=document.getElementById('myBtn');
btn.addEventListener('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);
 

注意：通過addEventListener()新增的匿名函式將無法移除。

4、IE事件處理程式

指定事件處理程式：attachEvent()，刪除事件處理程式：detachEvent()

接收兩個引數：要處理的事件名、作為事件處理程式的函式。

5、跨瀏覽器事件處理程式

要保證事件處理事件的程式碼能在大多數瀏覽器下一致地執行，只需要關注冒泡階段。

var EvenUtil={
    addHander:function (el,type,hander) {
        if(el.addEventListener){
            el.addEventListener(type,hander,false);
        }else if(el.attachEvent){
            el.attachEvent("on"+type,hander);
        }else {
            el["on"+type]=hander;
        }
    },
    removeHander:function (el.type,hander) {
        //
    }
};