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

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

1、html事件處理程序

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

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

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

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

<input type="button" value="click me!"/><script>function showMessage(){ alert("clicked!");}</script>

note:

1）通過event變量可以直接訪問事件本身，比如onclick="alert(event.type)"會彈出click事件。

2）this值等于事件的目標(biāo)元素，這里目標(biāo)元素是input。比如onclick="alert(this.value)"可以得到input元素的value值。

2、DOM0級事件處理程序

這種方法簡單而且跨瀏覽器，但是只能為一個元素添加一個事件處理函數(shù)。

因為這種方法為元素添加多個事件處理函數(shù)，則后面的會覆蓋前面的。

添加事件處理程序：

<input type="button" value="click me!" onclick="showMessage()"/>
<script>
function showMessage(){
 alert("clicked!");
}
</script>

刪除事件處理程序：

復(fù)制代碼代碼如下:

myBtn.onclick=null;

3、DOM2級事件處理程序

DOM2級事件處理程序可以為一個元素添加多個事件處理程序。其定義了兩個方法用于添加和刪除事件處理程序：addEventListener()和removeEventListener()。

這兩個方法都需要3個參數(shù)：事件名，事件處理函數(shù)，布爾值。

這個布爾值為true,在捕獲階段處理事件，為false，在冒泡階段處理事件，默認(rèn)為false。

添加事件處理程序：現(xiàn)在為按鈕添加兩個事件處理函數(shù)，一個彈出“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刪除，且參數(shù)一致。

note:通過addEventListener添加的匿名函數(shù)將無法刪除。下面這段代碼將不起作用！

復(fù)制代碼代碼如下:

myBtn.removeEventListener("click",function(){ alert("world"); },false);

看似該removeEventListener與上面的addEventListener參數(shù)一致，實則第二個參數(shù)中匿名函數(shù)是完全不同的。

所以為了能刪除事件處理程序，代碼可以這樣寫：

<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、實際應(yīng)用場景

IE8及以下瀏覽器不支持addEventListener，在實際開發(fā)中如果要兼容到IE8及以下瀏覽器。如果用原生的綁定事件，需要做兼容處理，可利用jquery的bind代替。

2、IE8事件綁定

IE8及以下版本瀏覽器實現(xiàn)了與DOM中類似的兩個方法：attachEvent()和detachEvent()。

這兩個方法都需要兩個參數(shù)：事件處理程序名稱和事件處理程序函數(shù)。

note:

IE11只支持addEventListener！

IE9，IE10對attachEvent和addEventListener都支持！

TE8及以下版本只支持attachEvent！

可以拿下面代碼在IE各個版本瀏覽器中進(jìn)行測試。

<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>

添加事件處理程序：現(xiàn)在為按鈕添加兩個事件處理函數(shù)，一個彈出“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中事件觸發(fā)順序相反。

IE9及以上瀏覽器先彈出“hello”，再彈出“world”。和DOM中事件觸發(fā)順序相同了。

可見IE瀏覽器慢慢也走上正軌了。。。

刪除事件處理程序:通過attachEvent添加的事件處理程序必須通過detachEvent方法刪除，且參數(shù)一致。

和DOM事件一樣，添加的匿名函數(shù)將無法刪除。

所以為了能刪除事件處理程序，代碼可以這樣寫：

<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級的方法作用域都是在元素內(nèi)部，this值為目標(biāo)元素。

下面例子會彈出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事件學(xué)習(xí)小結(jié)(二)js事件處理程序的相關(guān)知識，希望對大家有所幫助！

您可能感興趣的文章: