相關閱讀：
JavaScript事件學習小結(五）js中事件類型之鼠標事件
http://www.jb51.net/article/86259.htm
JavaScript事件學習小結（一）事件流
http://www.jb51.net/article/86261.htm
javaScript事件學習小結（四）event的公共成員（屬性和方法）
http://www.jb51.net/article/86262.htm
JavaScript事件學習小結(二)js事件處理程序
http://www.jb51.net/article/86264.htm
JavaScript事件學習小結（三）js事件對象
一、事件處理程序
前面提到，事件是用戶或浏覽器自身執行的某種動作，如click,load和mouseover都是事件的名字。響應某個事件的函數就叫事件處理程序（也叫事件處理函數、事件句柄）。事件處理程序的名字以"on"開頭，因此click事件的事件處理程序就是onclick,load事件的事件處理程序就是onload。
為事件指定事件處理程序的方法主要有3種。
1、html事件處理程序
首先，這種方法已經過時了。因為動作(javascript代碼)和內容(html代碼)緊密耦合。但是寫個小demo的時候還是可以使用的。
這種方式也有兩種方法，都很簡單：
第一種：直接在html中定義事件處理程序及包含的動作。
復制代碼 代碼如下:<input type="button" value="click me!"/>
第二種：html中定義事件處理程序，執行的動作則調用其他地方定義的腳本。
復制代碼 代碼如下:<input type="button" value="click me!"/><script>function showMessage(){ alert("clicked!");}</script>
note:
1）通過event變量可以直接訪問事件本身，比如onclick="alert(event.type)"會彈出click事件。
2）this值等於事件的目標元素，這裡目標元素是input。比如onclick="alert(this.value)"可以得到input元素的value值。
2、DOM0級事件處理程序
這種方法簡單而且跨浏覽器，但是只能為一個元素添加一個事件處理函數。
因為這種方法為元素添加多個事件處理函數，則後面的會覆蓋前面的。
添加事件處理程序：
<input type="button" value="click me!" onclick="showMessage()"/>
<script>
function showMessage(){
alert("clicked!");
}
</script>
刪除事件處理程序：
復制代碼 代碼如下: myBtn.onclick=null;
3、DOM2級事件處理程序
DOM2級事件處理程序可以為一個元素添加多個事件處理程序。其定義了兩個方法用於添加和刪除事件處理程序：addEventListener()和removeEventListener()。
這兩個方法都需要3個參數：事件名，事件處理函數，布爾值。
這個布爾值為true,在捕獲階段處理事件，為false，在冒泡階段處理事件，默認為false。
添加事件處理程序：現在為按鈕添加兩個事件處理函數，一個彈出“hello”,一個彈出“world”。
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
myBtn.addEventListener("click",function(){
alert("hello");
},false);
myBtn.addEventListener("click",function(){
alert("world");
},false);
</script>
刪除事件處理程序：通過addEventListener添加的事件處理程序必須通過removeEventListener刪除，且參數一致。
note:通過addEventListener添加的匿名函數將無法刪除。下面這段代碼將不起作用！
復制代碼 代碼如下: myBtn.removeEventListener("click",function(){ alert("world"); },false);
看似該removeEventListener與上面的addEventListener參數一致，實則第二個參數中匿名函數是完全不同的。
所以為了能刪除事件處理程序，代碼可以這樣寫：
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
var handler=function(){
alert("hello");
}
myBtn.addEventListener("click",handler,false);
myBtn.removeEventListener("click",handler,false);
</script>
二、IE事件處理程序
1、實際應用場景
IE8及以下浏覽器不支持addEventListener，在實際開發中如果要兼容到IE8及以下浏覽器。如果用原生的綁定事件，需要做兼容處理，可利用jquery的bind代替。
2、IE8事件綁定
IE8及以下版本浏覽器實現了與DOM中類似的兩個方法：attachEvent()和detachEvent()。
這兩個方法都需要兩個參數：事件處理程序名稱和事件處理程序函數。
note:
IE11只支持addEventListener！
IE9，IE10對attachEvent和addEventListener都支持！
TE8及以下版本只支持attachEvent！
可以拿下面代碼在IE各個版本浏覽器中進行測試。
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
var handlerIE=function(){
alert("helloIE");
}
var handlerDOM= function () {
alert("helloDOM");
}
myBtn.addEventListener("click",handlerDOM,false);
myBtn.attachEvent("onclick",handlerIE);
</script>
添加事件處理程序：現在為按鈕添加兩個事件處理函數，一個彈出“hello”,一個彈出“world
<script>
var myBtn=document.getElementById("myBtn");
myBtn.attachEvent("onclick",function(){
alert("hello");
});
myBtn.attachEvent("onclick",function(){
alert("world");
});
</script>
note:這裡運行效果值得注意一下：
IE8以下浏覽器中先彈出“world”，再彈出“hello”。和DOM中事件觸發順序相反。
IE9及以上浏覽器先彈出“hello”，再彈出“world”。和DOM中事件觸發順序相同了。
可見IE浏覽器慢慢也走上正軌了。。。
刪除事件處理程序:通過attachEvent添加的事件處理程序必須通過detachEvent方法刪除，且參數一致。
和DOM事件一樣，添加的匿名函數將無法刪除。
所以為了能刪除事件處理程序，代碼可以這樣寫：
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
var handler= function () {
alert("hello");
}
myBtn.attachEvent("onclick",handler);
myBtn.detachEvent("onclick",handler);
</script>
note:IE事件處理程序中還有一個地方需要注意：作用域。
使用attachEvent()方法，事件處理程序會在全局作用域中運行，因此this等於window。
而dom2或dom0級的方法作用域都是在元素內部，this值為目標元素。
下面例子會彈出true。
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
myBtn.attachEvent("onclick",function(){
alert(this===window);
});
</script>
在編寫跨浏覽器的代碼時，需牢記這點。
IE7\8檢測：
//判斷IE7\8 兼容性檢測
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
var isIE8=isIE&&!!document.documentMode;
var isIE7=isIE&&!isIE6&&!isIE8;
if(isIE8 || isIE7){
li.attachEvent("onclick",function(){
_marker.openInfoWindow(_iw);
})
}else{
li.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
}
以上所述是小編給大家介紹的JavaScript事件學習小結(二)js事件處理程序的相關知識，希望對大家有所幫助！