相關閱讀：
JavaScript事件學習小結(五）js中事件類型之鼠標事件
//www.VeVB.COm/article/86259.htm
JavaScript事件學習小結（一）事件流
//www.VeVB.COm/article/86261.htm
javaScript事件學習小結（四）event的公共成員（屬性和方法）
//www.VeVB.COm/article/86262.htm
JavaScript事件學習小結(二)js事件處理程序
//www.VeVB.COm/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事件處理程序的相關知識，希望對大家有所幫助！