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

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

1、html事件處理程序

首先，這種方法已經(jīng)過(guò)時(shí)了。因?yàn)閯?dòng)作(javascript代碼)和內(nèi)容(html代碼)緊密耦合。但是寫個(gè)小demo的時(shí)候還是可以使用的。

這種方式也有兩種方法，都很簡(jiǎn)單：

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

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

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

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

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

note:

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

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

2、DOM0級(jí)事件處理程序

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

因?yàn)檫@種方法為元素添加多個(gè)事件處理函數(shù)，則后面的會(huì)覆蓋前面的。

添加事件處理程序：

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

刪除事件處理程序：

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

myBtn.onclick=null;

3、DOM2級(jí)事件處理程序

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

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

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

添加事件處理程序：現(xiàn)在為按鈕添加兩個(gè)事件處理函數(shù)，一個(gè)彈出“hello”,一個(gè)彈出“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>

刪除事件處理程序：通過(guò)addEventListener添加的事件處理程序必須通過(guò)removeEventListener刪除，且參數(shù)一致。

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

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

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

看似該removeEventListener與上面的addEventListener參數(shù)一致，實(shí)則第二個(gè)參數(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、實(shí)際應(yīng)用場(chǎng)景

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

2、IE8事件綁定

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

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

note:

IE11只支持addEventListener！

IE9，IE10對(duì)attachEvent和addEventListener都支持！

TE8及以下版本只支持attachEvent！

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

<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)在為按鈕添加兩個(gè)事件處理函數(shù)，一個(gè)彈出“hello”,一個(gè)彈出“world

<script>
 var myBtn=document.getElementById("myBtn");
 myBtn.attachEvent("onclick",function(){
  alert("hello");
 });
 myBtn.attachEvent("onclick",function(){
  alert("world");
 });
</script>

note:這里運(yùn)行效果值得注意一下：

IE8以下瀏覽器中先彈出“world”，再?gòu)棾觥癶ello”。和DOM中事件觸發(fā)順序相反。

IE9及以上瀏覽器先彈出“hello”，再?gòu)棾觥皐orld”。和DOM中事件觸發(fā)順序相同了。

可見(jiàn)IE瀏覽器慢慢也走上正軌了。。。

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

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

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

<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事件處理程序中還有一個(gè)地方需要注意：作用域。

使用attachEvent()方法，事件處理程序會(huì)在全局作用域中運(yùn)行，因此this等于window。

而dom2或dom0級(jí)的方法作用域都是在元素內(nèi)部，this值為目標(biāo)元素。

下面例子會(huì)彈出true。

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 myBtn.attachEvent("onclick",function(){
  alert(this===window);
 });
</script>

在編寫跨瀏覽器的代碼時(shí)，需牢記這點(diǎn)。

IE7\8檢測(cè)：

//判斷IE7\8 兼容性檢測(cè)
   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)知識(shí)，希望對(duì)大家有所幫助！

您可能感興趣的文章: