有關(guān)事件處理程序?qū)傩裕幸韵聨c需要說明：

1、事件處理程序?qū)傩匀啃懀浴眔n”開頭，后面跟事件類型：

onclick  //單擊鼠標 onload  //圖像或頁面載入完成 onmouseover  //將鼠標移動到某元素上面 onmousemove  //移動鼠標 onfocus  //對象獲得焦點

2、每個元素如img、a、input、form包括window和document都擁有自己的事件處理程序?qū)傩?。如?/p>

document.getElementById("btn1").onclick  //btn1上單擊鼠標 document.getElementById("img1").onmouseover  //鼠標移動到img1 document.getElementById("img1").onmerror  //img1圖像無法載入

接下來，給事件處理程序?qū)傩再x值即可完成事件處理程序方法的指定。例如，當鼠標移動到”img1”上時，彈出對話框”This is a nice pic!”：

var pic1 = document.getElementById("img1"); pic1.onmouseover = function() {     alert("This is a nice pic!"); };

特別注意：如果以上代碼處于文檔的底部，在頁面剛剛加載時，我們將鼠標移動到img1上面。有可能由于代碼尚未執(zhí)行，不會彈出我們設(shè)定的對話框！如今，這個延遲已經(jīng)十分短暫。

事件處理程序中的this

通過DOM0級方法指定的事件處理程序，屬于元素方法。因此，我們在事件處理程序中的this引用的是該元素！通過以下例子來說明：

<input id="btn1" type="button" value="Click Me" /> ...//省略 <script type="text/javascript">   <!--   var btn1 = document.getElementById("btn1");   btn1.onclick = function() {       alert(this.id + "n" + this.type + "n" + this.value);   };   --> </script>

通過DOM0級方法刪除事件處理程序

要刪除事件處理程序，只需要將對應的事件處理程序?qū)傩栽O(shè)置為null即可：

pic1.onmouseover = null;

三、DOM2級事件處理

1、addEventListener與removeEventListener

目前，幾乎所有的瀏覽器都支持DOM0事件模型，但鼓勵開發(fā)人員使用新的DOM2模型。DOM2模型與DOM0有兩個顯著區(qū)別：

• 1、DOM2不依賴事件處理程序?qū)傩?/li>
• 2、可以同時對對象的同一事件注冊多個處理程序，它們按照注冊順序依次執(zhí)行。

DOM2定義了2個方法：

addEventListener()  //指定事件處理程序 removeEventListener()  //刪除事件處理程序

所有DOM節(jié)點有包含這兩個方法，這兩個方法用法如下，它們都接收3個參數(shù)，第1個為要處理事件名(不含on)，第2個事件處理函數(shù)，第3個布爾變量：

例如我們?yōu)榘粹obtn1的單擊事件添加2個事件處理程序，事件處理程序在事件冒泡階段被處理：

<input id="btn1" type="button" value="Click Me" /> ... <script type="text/javascript">   <!--   var btn1 = document.getElementById("btn1");   var handle1 = function() {       alert("handle1!");   }   var handle2 = function() {       alert("handle2!");   }   btn1.addEventListener("click", handle1, false);   btn1.addEventListener("click", handle2, false);   --> </script>

當單擊btn1按鈕時，會依次彈出對話框：

handle1! handle2!

我們可以用removeEventListener()方法來刪除我們剛才指定的事件處理程序，注意參數(shù)要保持一致：

btn1.removeEventListener("click", handle2, false);

此時單擊btn1按鈕，只會顯示handle1!。

要特別注意的是，如果我們使用匿名函數(shù)指定事件處理程序，便無法使用removeEventListener()方法刪除事件處理程序：

 btn1.addEventListener("click", function(){      alert("click!");  }, false);   btn1.removeEventListener("click", function(){      alert("click!");  }, false);  //無法取消！

這樣是無法取消以上指定的事件處理程序的！因為上面addEventListener和removeEventListener中的2個事件處理函數(shù)雖然代碼相同，實質(zhì)上是2個不同的函數(shù)引用。

另外，強調(diào)一點，以上兩個函數(shù)的第一個參數(shù)(要處理的事件名)是沒有on前綴的。這一點和IE不同，后面會說明。

tips: IE9, Firefox, Safari, Chrome以及Opera均支持DOM2級事件處理程序。

DOM2事件處理程序中的this

DOM2事件處理程序和DOM0相同，它們的this都在其依附的元素作用域中運行。this的指代參考DOM0的示例。這里之所以要特別指出DOM2的this，是為了和IE事件處理程序進行區(qū)分。IE中事件處理程序this與事件指定方式有關(guān)。

四、IE事件處理程序及跨瀏覽器支持

attachEvent()與detachEvent()

IE并沒有提供對W3C事件模型的支持，其實現(xiàn)了2個和DOM2模型類似的方法：

attachEvent() detachEvent()

這兩個方法只接收2個參數(shù)：事件名稱以及事件處理函數(shù)。由于IE8及更早版本只支持事件冒泡，這兩個方法添加的事件處理程序會在事件冒泡階段被執(zhí)行。

和DOM2不同的是：

• 1、IE事件處理方法運行作用域為全局作用域，this指代window；
• 2、第一個參數(shù)事件名以on為前綴；
• 3、當為同一對象的相同事件指定多個處理程序時，執(zhí)行順序和DOM2相反，IE中以添加它們的相反順序執(zhí)行。

例如：

<input id="btn1" type="button" value="Click Me" /> ... <script type="text/javascript">   <!--   var btn1 = document.getElementById("btn1");   var handle1 = function() {       alert("handle1!" + "n" + (this === window));   };   var handle2 = function() {       alert("handle2!"+ "n" + (this === window));   };   btn1.attachEvent("onclick", handle1);   btn1.attachEvent("onclick", handle2);   --> </script>

執(zhí)行結(jié)果：

handle2! true  handle1! true

跨瀏覽器支持

雖然可以使用屏蔽瀏覽器差異的JS庫，實際上，我們自己編寫一個跨瀏覽器兼容的事件處理代碼并不是一件困難的事情，同時更有利于我們對原生JavaScript的學習理解。我們使用一個習慣上稱為EventUtil的對象來進行跨瀏覽器事件處理：

var EventUtil = {     addEventHandler : function(element, eventType,        handler) {         if(element.addEventListener){             element.addEventListener(eventType, handler, flase);         } else if(element.attachEvent) {             element.attachEvent("on" + eventType, handler);         } else {             element["on" + eventType] = handler;         }     },      removeEventHandler : function(element, eventType, handler) {         if(element.aremoveEventListener){             element.addEventListener(eventType, handler, flase);         } else if(element.detachEvent) {             element.attachEvent("on" + eventType, handler);         } else {             element["on" + eventType] = null;         }     } }

為了保證事件處理代碼能夠在大多數(shù)瀏覽器中一致地運行，我們這里只關(guān)注冒泡階段。以上代碼使用瀏覽器能力檢測，首先檢測是否支持DOM2級方法addEventListener和removeEventListener，如果支持則使用該方法；如果不支持該方法，檢測是否是IE8級更早版本的attachEvent或detachEvent方法，若支持則使用該方法；如果對以上2種方法都不支持，則使用DOM0級方法。要注意，DOM0級對每個事件只能指定一個事件處理程序。

以上對象使用示例如下：

var btn1 = document.getElementById("btn1");var handle1 = function() {     alert("handle1!" + "n" + (this === window)); };var handle2 = function() {     alert("handle2!"+ "n" + (this === window)); }; EventUtil.addEventHandler(btn1, "click", handler1); EventUtil.addEventHandler(btn1, "click", handler2);  EventUtil.removeEventHandler(btn1, "click", handler2);

五、事件對象

在觸發(fā)某個事件時，會產(chǎn)生一個event對象。該對象中包含與事件有關(guān)的信息。例如觸發(fā)事件的元素、事件的類型、與特定事件相關(guān)的如鼠標位置信息等。

• 1、DOM事件對象
• 2、IE事件對象與跨瀏覽器事件對象

1、DOM事件對象

不論使用DOM0級還是DOM2級方法指定事件處理程序，事件觸發(fā)時都會自動將一個event對象傳入事件處理程序，例如：

var btn1 = document.getElementById("btn1");  btn1.onmouseover = function(evnt) {     alert(evnt.type); }var handle = function(evnt) {     alert(evnt.type); }; btn1.addEventListener("click", handle, false);

以上是一個簡單的event對象的示例。event對象中的type屬性是一個只讀字符串屬性，其中包含著事件的類型。例如我們上例中的click和onmouseover。event對象中包含有大量的有關(guān)事件的屬性和方法（例如event.stopPropagation()方法可用于停止事件在捕獲或者冒泡階段的繼續(xù)傳播，preventDefault()方法會取消阻止事件的行）在此就不一一列舉了。其中常用的如下：

2、IE事件對象與跨瀏覽器事件對象

IE事件對象

在IE中，當使用DOM0級指定事件處理程序時，event對象被認為是window的一個屬性，例如獲取鼠標點擊坐標的代碼：

var mouseLoc = function() {     var loc = "x: " + window.event.screenX + "n" +              "y: " + window.event.screenY;     alert(loc); };

當使用attachEvent()方法指定事件處理程序時，event對象會被作為參數(shù)傳入事件處理程序，我們將以上的代碼重寫：

var mouseLoc = function(event) {     var loc = "x: " + event.screenX + "n" +              "y: " + event.screenY;     alert(loc); }; btn1.attachEvent("onclick",  mouseLoc);

IE中event對象的相關(guān)屬性方法：

跨瀏覽器事件對象

解決跨瀏覽器問題的思路是一貫的，我們可以對瀏覽器進行能力檢測，這里我們對上面的EventUtil對象進行擴展，對我們學習原生JS，這是一個很漂亮的對象：

var EventUtil = {     addEventHandler : function(element, eventType, handler) {         if(element.addEventListener){             element.addEventListener(eventType, handler, flase);         } else if(element.attachEvent) {             element.attachEvent("on" + eventType, handler);         } else {             element["on" + eventType] = handler;         }     },      removeEventHandler : function(element, eventType, handler) {         if(element.aremoveEventListener){             element.addEventListener(eventType, handler, flase);         } else if(element.detachEvent) {             element.attachEvent("on" + eventType, handler);         } else {             element["on" + eventType] = null;         }     },      getEvent: function (event) {         return event ? event : window.event;     },      getTarget: function (event) {         return event.target || event.srcElement;     },      preventDefault: function (event) {         if (event.preventDefault) {             event.preventDefault();         } else {             event.returnValue = false;         }     },      stopPropagation: function (event) {         if (event.stopPropagation) {             event.stopPropagation();         } else {             event.cancelBubbles = true;         }     },      getRelatedTarget: function (event) {         if (event.relatedTarger) {            return event.relatedTarget;         } else if (event.toElement) {            return event.toElement;         } else if (event.fromElement) {            return event.fromElement;         } else { return null; }     } }

【