相關閱讀：

JavaScript事件學習小結(五）js中事件類型之鼠標事件

//m.survivalescaperooms.com/article/86259.htm

JavaScript事件學習小結（一）事件流

//m.survivalescaperooms.com/article/86261.htm

javaScript事件學習小結（四）event的公共成員（屬性和方法）

//m.survivalescaperooms.com/article/86262.htm

JavaScript事件學習小結(二)js事件處理程序

//m.survivalescaperooms.com/article/86264.htm

JavaScript事件學習小結（三）js事件對象

一、事件處理程序

前面提到，事件是用戶或瀏覽器自身執行的某種動作，如click,load和mouseover都是事件的名字。響應某個事件的函數就叫事件處理程序（也叫事件處理函數、事件句柄）。事件處理程序的名字以"on"開頭，因此click事件的事件處理程序就是onclick,load事件的事件處理程序就是onload。

為事件指定事件處理程序的方法主要有3種。

1、html事件處理程序

首先，這種方法已經過時了。因為動作(javascript代碼)和內容(html代碼)緊密耦合。但是寫個小demo的時候還是可以使用的。

這種方式也有兩種方法，都很簡單：

第一種：直接在html中定義事件處理程序及包含的動作。

第二種：html中定義事件處理程序，執行的動作則調用其他地方定義的腳本。

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>

刪除事件處理程序：

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添加的匿名函數將無法刪除。下面這段代碼將不起作用！

看似該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事件處理程序的相關知識，希望對大家有所幫助！