我們知道JavaScript與HTML之間的交互是通過(guò)事件實(shí)現(xiàn)的。事件最早是在IE3和Netscape Navigator 2中出現(xiàn)的，當(dāng)時(shí)是作為分擔(dān)服務(wù)器運(yùn)算負(fù)載的一種手段。 　通俗地理解，事件就是用戶(hù)或?yàn)g覽器自身執(zhí)行的某種操作。而事件處理程序即為響應(yīng)某個(gè)事件的函數(shù)。抽出主干，即事件處理程序?yàn)楹瘮?shù)。  我們又把事件處理程序稱(chēng)為事件偵聽(tīng)器。  事件處理程序是以"on"開(kāi)頭的，因此對(duì)于事件on的時(shí)間處理程序即為onclick。時(shí)間處理程序在JavaScript中大致有五種，下面會(huì)根據(jù)這五種不同的時(shí)間處理程序分為5部分來(lái)介紹。

1.HTML事件處理程序

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

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

4.IE事件處理程序

5.跨瀏覽器的事件處理程序

第一部分：HTML事件處理程序

什么使HTML事件處理程序呢？顯然，通過(guò)名字就可以猜到，它是卸載HTML中的函數(shù)（事件處理程序）。初學(xué)者大多用到的事件處理程序即為HTML事件處理程序。下面舉例：

例1：

<button onclick="alert('success')">點(diǎn)我</button>

這條代碼即為事件處理程序，點(diǎn)擊button后，會(huì)彈出彈框，顯示success。

特點(diǎn)：HTML事件處理程序中Javascript代碼作為了onclick特性的值，因此，我們不能在JavaScript代碼中使用未經(jīng)轉(zhuǎn)義的HTML語(yǔ)法字符，如&(和號(hào))、""（雙引號(hào)）、<(小于號(hào))、>（大于號(hào)）等等。所以這個(gè)例子中字符串我使用了單引號(hào)而沒(méi)有使用雙引號(hào)?？聪旅嬖贘avaScript代碼中使用了未經(jīng)轉(zhuǎn)義的HTML語(yǔ)法字符。

 例2：

<button onclick="alert("success")">點(diǎn)我</button>

這時(shí)，我在success外使用了HTML語(yǔ)法字符""(雙引號(hào))，這時(shí)不會(huì)彈出窗口，而是報(bào)錯(cuò)語(yǔ)法錯(cuò)誤。但是我如果還是希望使用雙引號(hào)呢？ 這時(shí)就要用&quot;實(shí)體來(lái)代替HTML中的語(yǔ)法字符。如下例所示：

例3：

<button onclick="alert(&quot;success&quot;)">點(diǎn)我</button>
  <!-- 正常彈出窗口-->

這個(gè)例子中我們?cè)贘avaScript代碼中使用了HTML實(shí)體而沒(méi)有使用HTML語(yǔ)法字符，這時(shí)就不會(huì)報(bào)錯(cuò)了。

 例4：

<button onclick="show()">點(diǎn)我</button>

<!-- 正常彈出窗口--> 

<script>

  function show(){

    alert("success");

  }

</script> 

這個(gè)例子中我們調(diào)用函數(shù)，而把函數(shù)定義放在了script中，這樣也是可以的。因?yàn)椋菏录幚沓绦蛑械拇a在執(zhí)行時(shí)，有權(quán)訪問(wèn)到全局作用域中的任何代碼。這句話怎么理解呢？  實(shí)際上，我們可以在chrome中觀察button標(biāo)簽的作用域鏈。如下所示：

接下來(lái)我們?cè)倏纯磗cript所在的作用域，如下圖所示：

可以看到script標(biāo)簽就在全局作用域。

也就是說(shuō)目前button中的HTML事件處理函數(shù)在作用域鏈的最前端，而Script在全局作用域，所以“事件處理程序中的代碼在執(zhí)行時(shí)，有權(quán)訪問(wèn)到全局作用域中的任何代碼。”這句話就不難理解了。

 例5：

<button onclick="alert(event.type)">點(diǎn)我</button>

這時(shí)瀏覽器彈出窗口顯示：click。這個(gè)例子是什么意思呢？注意到我并沒(méi)有在event.type外加單引號(hào)，說(shuō)明這并不是字符串。實(shí)際上，event是局部對(duì)象--在觸發(fā)DOM上的某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對(duì)象event，這個(gè)對(duì)象包含著所有與事件有關(guān)的信息。而這里是彈出了對(duì)象了類(lèi)型，即為click。

 HTML事件處理程序的三個(gè)缺點(diǎn)（重點(diǎn)）：

1. 時(shí)差問(wèn)題。 因?yàn)橛脩?hù)可能在HTML元素一出現(xiàn)就開(kāi)始觸發(fā)相應(yīng)事件，但是有可能該事件的腳本（如例4中show()函數(shù)的函數(shù)定義在script中）還沒(méi)有加載完成，此時(shí)不具備執(zhí)行條件，故報(bào)錯(cuò)。

解決方法：將HTML事件處理程序封裝在一個(gè)try-catch塊中，以便錯(cuò)誤不會(huì)浮出水面。

<input type="button" value="click me" onclick="try{show();}catch(ex){}">

2.這樣擴(kuò)展事件實(shí)例程序的作用域鏈在不同的瀏覽器中會(huì)導(dǎo)致不同的結(jié)果（例4中我是在chrome中查看的作用域鏈，其他瀏覽器不一定是這樣的，請(qǐng)注意）。不同JavaScript引擎遵循的標(biāo)識(shí)符解析規(guī)則略有差異，很有可能會(huì)在訪問(wèn)非限定對(duì)象成員時(shí)出錯(cuò)。

3.HTML和JavaScript代碼緊密耦合。 結(jié)果是：如果要更換事件處理程序，就必須改動(dòng)兩個(gè)地方--HTML代碼和JavaScript代碼。

 那么怎么解決上面的問(wèn)題呢？ DOM0級(jí)事件處理程序是一個(gè)不錯(cuò)的選擇!

第二部分：DOM0級(jí)事件處理程序

DOM0級(jí)事件處理程序用的也非常普遍。之所以成為DOM0級(jí)，我認(rèn)為是當(dāng)時(shí)還沒(méi)有出DOM標(biāo)準(zhǔn)，而IE和Netscape Navigator兩者使用的時(shí)間處理程序（不知是否合理，望批評(píng)指正）。 總之，我們先看看下面的例子吧。

例6：

<button id="button">點(diǎn)我</button>

<script>
  var button=document.getElementById("button");
  button.onclick=function(){
    alert("clicked");
  }
</script>

即我們先在script中取得元素的引用，然后再將一個(gè)函數(shù)賦值給onclick事件處理程序。 之前介紹過(guò)，事件處理程序即為函數(shù)，而button.onclick這種形式即函數(shù)作為了對(duì)象的方法。那么對(duì)象的方法即事件處理程序是在元素（對(duì)象）的作用域中運(yùn)行而非在全局作用域中運(yùn)行的，因?yàn)榉椒ㄊ菍儆趯?duì)象的。(注意：例4中事件處理程序是在全局作用域中運(yùn)行的）。 如果這個(gè)函數(shù)中存在this關(guān)鍵字，那么this就會(huì)指向這個(gè)對(duì)象。下面我們?cè)跒g覽器中證明事件處理程序是在元素的作用域中運(yùn)行。

我們看到alert("clicked");確實(shí)是在button中運(yùn)行的。

我們還可以通過(guò)下面的方式刪除通過(guò)DOM0級(jí)方法指定的事件處理程序。

button.onclick=null;

通過(guò)上面的分析我們可以知道DOM0級(jí)事件處理程序是非常不錯(cuò)的，它解決了HTML事件處理程序的三個(gè)缺點(diǎn)：時(shí)差問(wèn)題、作用域鏈導(dǎo)致的不同瀏覽器表現(xiàn)不一致問(wèn)題和HTML和JavaScript緊密耦合問(wèn)題。

但是，DOM0級(jí)事件處理程序并不是完美的，它同樣有兩個(gè)缺點(diǎn)：

1.我們不能給一個(gè)元素同時(shí)添加兩個(gè)事件。

2.我們不能控制元素的事件流（捕獲or冒泡）。

對(duì)于第二個(gè)問(wèn)題后面會(huì)講到，第一個(gè)問(wèn)題舉例如下：

<button id="button">點(diǎn)我</button>

<script>
  var button=document.getElementById("button");
  button.onclick=function(){
    alert("clicked");
  }
  button.onclick=function(){
    alert("again");
  }

雖然我對(duì)同一個(gè)元素設(shè)置了兩個(gè)事件處理程序，但是最終的結(jié)果是：只有第二個(gè)事件有效（覆蓋了第一個(gè)事件）。當(dāng)然，人類(lèi)是聰明的動(dòng)物，DOM2級(jí)事件很好的解決了這個(gè)問(wèn)題!

第三部分：DOM2級(jí)事件處理程序

DOM2級(jí)事件處理程序定義了兩個(gè)方法：

• addEventListener()   ---添加事件偵聽(tīng)器
  
• removeEventListener()   ---刪除事件偵聽(tīng)器

在博文的開(kāi)頭我就提到了事件處理程序即事件偵聽(tīng)器。這兩個(gè)方法都接收三個(gè)參數(shù)：

1.要處理的事件名（注意：是時(shí)間名，所以沒(méi)有on！），如click、mouseover等。

2.作為事件處理程序的函數(shù)，如function(){alert("clicked");}

3. 表示事件流方式的布爾值。false為冒泡階段調(diào)用事件處理程序；true為捕獲階段調(diào)用事件處理程序。

下面通過(guò)兩個(gè)例子加深理解：

例7：

<button id="button">點(diǎn)我</button>

<script>
  var button=document.getElementById("button");
  button.addEventListener("click",function(){
    alert(this.id);
  },false);
  button.addEventListener("click",function(){
    alert("another event");
  },false);
</script>

結(jié)果：第一次彈出窗口：button。

　　　第二次彈出窗口：another event。

結(jié)論：通過(guò)DOM2級(jí)事件處理程序，我們可以為同一個(gè)元素添加兩個(gè)或更多的事件。事件根據(jù)順序依次觸發(fā)。且this同樣指向當(dāng)前元素，故函數(shù)在元素的作用域中執(zhí)行。

this分析：和前面的DOM0級(jí)事件處理程序一樣，這里的addEventListener同樣也可以看作對(duì)象的方法，不同之初在于，DOM0級(jí)的方法需要另外一個(gè)函數(shù)來(lái)賦值，而這里的方法是DOM2級(jí)規(guī)范預(yù)定義的。

removeEventListener()這個(gè)刪除事件處理程序的方法值得注意的是：使用addEventListener()來(lái)添加的事件處理程序只能通過(guò)它來(lái)移除，且需要傳入相同的參數(shù)。

例8：

<button id="button">點(diǎn)我</button>

<script>
  var button=document.getElementById("button");
  button.addEventListener("click",function(){
    alert(this.id);
  },false);
  button.removeEventListener("click",function(){
    alert("another event");
  },false);

上述代碼貌似可以移除click的事件處理程序，但是通過(guò)實(shí)驗(yàn)證明是不可以的，原因是：事件處理程序?yàn)槟涿瘮?shù)時(shí)無(wú)法移除?？聪旅娴某晒σ瞥睦樱?/p>

 例9：

<button id="button">點(diǎn)我</button>

<script>
  var button=document.getElementById("button");
  function handler(){
    alert(this.id);
  }
  button.addEventListener("click",handler,false);
  button.removeEventListener("click",handler,false);
</script>

成功移除！

注意：1.傳入方法的handler沒(méi)有（），是因?yàn)檫@里都只是定義函數(shù)，而不是調(diào)用，需要注意。

　　　2.這兩個(gè)方法的第三個(gè)參數(shù)都是false，即事件處理程序添加到冒泡階段。一般不使用true,因?yàn)榈桶姹镜腎E不支持捕獲階段。

 DOM2級(jí)事件處理程序成功地解決了前面所有事件處理程序的問(wèn)題，堪稱(chēng)perfect!!!!  然而總是特立獨(dú)行的IE瀏覽器又有新花樣，它也有自己的一套事件處理程序，下面我們就來(lái)看看吧。

 第四部分：IE事件處理程序

IE事件處理程序中有類(lèi)似與DOM2級(jí)事件處理程序的兩個(gè)方法：

1.attachEvent()

2.detachEvent()

它們都接收兩個(gè)參數(shù)：

1.事件處理程序名稱(chēng)。如onclick、onmouseover，注意：這里不是事件，而是事件處理程序的名稱(chēng)，所以有on。

2.事件處理程序函數(shù)。如function(){alert("clicked");}

之所以沒(méi)有和DOM2級(jí)事件處理程序中類(lèi)似的第三個(gè)參數(shù)，是因?yàn)镮E8及更早版本只支持冒泡事件流。

注意：

1.IE事件處理程序中attachEvent()的事件處理程序的作用域和DOM0與DOM2不同，她的作用域是在全局作用域中。因此，不同于DOM0和DOM2中this指向元素，IE中的this指向window。

2.同樣，我們可以使用attachEvent()來(lái)給同一個(gè)元素添加多個(gè)事件處理程序。但是與DOM2不同，事件觸發(fā)的順序不是添加的順序而是添加順序的相反順序。

3.同樣地，通過(guò)attachEvent()添加的事件處理程序必須通過(guò)detachEvent()方法移除，同樣的，不能使用匿名函數(shù)。

4.支持IE事件處理程序的瀏覽器不只有IE瀏覽器，還有Opera瀏覽器。

第五部分：跨瀏覽器的事件處理程序

實(shí)際上，這一部分視為了跨瀏覽器使用，將前面的幾部分結(jié)合起來(lái)就可以了。

這一部分需要?jiǎng)?chuàng)建兩個(gè)方法：

• addHandler()  --這個(gè)方法職責(zé)是視情況來(lái)使用DOM0級(jí)、DOM2級(jí)、IE事件處理程序來(lái)添加事件。
• removeHandler()--這個(gè)方法就是移除使用addHandler添加的事件。

這兩個(gè)方法接收相同的三個(gè)參數(shù)：

1.要操作的元素--通過(guò)dom方法獲取

2.事件名稱(chēng)--注意：沒(méi)有on，如click、mouseover
3.事件處理程序函數(shù)--即handler函數(shù)

這兩個(gè)方法的構(gòu)造情況如下：

var EventUtil={
  addHandler:function(element,type,handler){
    if(element.addEventListener){
      element.addEventListener(type,handler,false);//注意：這里默認(rèn)使用了false（冒泡）
    }else if(element.attachEvent){
      element.attachEvent("on"+type,handler);
    }else{
      element["on"+type]=handler;
    }
  },
  removeHandler:function(element,type,handler){
    if(element.removeEventListener){
      element.removeEventListener(type,handler,false);//注意：這里默認(rèn)使用了false（冒泡）
    }else if(element.detachEvent){
      element.detachEvent("on"+type,handler);
    }else{
      element["on"+type]=null;
    }
  }
};

 即先判斷DOM2級(jí)事件處理程序，再判斷IE事件處理程序，最后使用DOM0級(jí)事件處理程序。

例10：通過(guò)這個(gè)例子來(lái)使用上面構(gòu)造的方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>跨瀏覽器事件處理程序</title>
</head>
<body> 

  <button id="button">點(diǎn)我</button>

<script>
var EventUtil={
  addHandler:function(element,type,handler){
    if(element.addEventListener){
      element.addEventListener(type,handler,false);//注意：這里默認(rèn)使用了false（冒泡）
    }else if(element.attachEvent){
      element.attachEvent("on"+type,handler);
    }else{
      element["on"+type]=handler;
    }
  },
  removeHandler:function(element,type,handler){
    if(element.removeEventListener){
      element.removeEventListener(type,handler,false);//注意：這里默認(rèn)使用了false（冒泡）
    }else if(element.detachEvent){
      element.detachEvent("on"+type,handler);
    }else{
      element["on"+type]=null;
    }
  }
};

  function handler(){
    alert("clicked");
  }

  var button=document.getElementById("button");
  EventUtil.addHandler(button,"click",handler);
</script>
</body>
</html>

最后瀏覽器成功彈出“clicked”。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論