JavaScript中為事件指定處理程序的五種方式分析

本文實例講述了JavaScript中為事件指定處理程序的五種方式。分享給大家供大家參考，具體如下：

JavaScript和HTML之間的交互是通過事件實現的。

IE9、Firefox、Opera、Sarifi、Chrome都已經實現了DOM2級事件模塊的核心部分，IE8是最后一個仍然使用其專有事件系統的主要瀏覽器。

事件流：

事件流描述的是從頁面中接受事件的順序，但IE和Netscape卻提出了完全相反的事件流的概念，IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流。

1) 事件冒泡

事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點接收，然后逐級向上傳播到較為不具體的節點（文檔）。

不支持事件冒泡的事件：blur、focus、load、unload。

2) 事件捕獲

不太具體的節點應該更早接收到事件，而最具體的節點應該最后接收到事件。事件捕獲的用意在于事件到達預定目標之前捕獲它。

雖然IE9、Safari、Chrome、Firefox、Opera都支持事件捕獲和事件冒泡，但IE8及其更早版本只支持事件冒泡，不支持事件捕獲，因此。建議使用事件冒泡，在有特殊需要的時候再使用事件捕獲。

DOM事件流：

DOM2級事件規定的事件流包括三個階段：事件捕獲階段，處于目標階段和事件冒泡階段。實際上，在事件捕獲階段預定目標不會接收到事件，處于目標階段事件在預定目標上發生。事件處理中，處于目標階段被看成事件冒泡階段的一部分。但是，即使“DOM2級事件”規范明確要求捕獲階段不會涉及事件目標，但IE9、 Safari、Chrome、Firefox和Opera9.5及更高版本都會在捕獲階段觸發事件對象上的事件，結果是有兩個機會在目標對象上操作事 件。

IE9、Firefox、Opera、Sarifi、Chrome都支持DOM事件流，IE8及其更早版本不支持DOM事件流。

事件處理程序：

事件就是用戶或瀏覽器自身執行的某種動作，而響應某個事件的函數就是事件處理程序（或事件偵聽器），事件處理程序的名字以“on”開頭。

JavaScript中有五種事件處理程序方式：

1) HTML事件處理程序

每種事件都可以使用一個與相應事件處理程序同名的HTML特性來指定，特性的值可以是能夠執行的JavaScript代碼，也可以是函數。函數中有一個局部變量event，通過event變量可以訪問事件對象；在函數內部，this值等于事件的目標元素。

在HTML中指定事件處理程序的幾個缺點：

①　時差問題：用戶可能在HTML元素一出現在頁面上就觸發相應的事件，但當時的事件處理程序有可能尚不具備執行條件，如用戶在解析事件處理函數之前就觸發事件。為此，很多HTML事件處理程序都會封裝在一個try-catch塊中，以便及時捕獲錯誤，以免錯誤拋出被用戶看到。

②　擴展事件處理程序的作用域鏈在不同瀏覽器中會導致不同的結果。不同JavaScript引擎遵循的標識符解析規則略有差異，很有可能會在訪問非限定對象成員時出錯。

③　HTML代碼與JavaScript代碼緊密耦合，更換事件處理程序需要改動HTML代碼與JavaScript代碼。

2) DOM0級事件處理程序

通過JavaScript指定事件處理程序的傳統方式，將一個函數賦值給一個事件處理程序屬性。使用DOM0級方法指定的事件處理程序被認為是元素的方法，因此this引用當前元素。

DOM0級事件處理程序的優勢：

①　簡單；

②　跨瀏覽器

可以通過將事件處理程序的值設置為null來刪除通過DOM0級方法指定的事件處理程序。

3) DOM2級事件處理程序

DOM2級事件定義了兩種方法，用于指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()，它們都接收3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值（true表示在捕獲階段調用事件處理程序，false表示在冒泡階段調用事件處理程序）。

DOM2級事件處理程序的優勢：

可以添加多個事件處理程序，它們會按照添加它們的順序觸發。

通過addEventListener()添加的事件處理程序只能用removeEventListener()來移除，但要求移除時傳入的參數與添加事件處理程序時使用的參數相同，因此通過addEventListener()添加的匿名函數將無法移除，需要給removeEventListener()傳入addEventListener()中命名的函數才能正常移除。

4) IE事件處理程序

IE事件定義了兩個方法：attachEvent()和detachEvent()，它們都接收2個參數：要處理的事件名、作為事件處理程序的函數.由于IE8及其更早版本只支持事件冒泡，所以通過attachEvent()添加的事件處理程序都會被添加到冒泡階段。

注意：通過IE的attachEvent()添加的事件處理程序的名字以“on”開頭，而通過DOM的addEventListener()添加的名字不是。

在IE中使用attachEvent()與使用DOM0級方法的主要區別：

事件處理程序的作用域不同。在IE中使用attachEvent()，事件處理程序會在全局作用域中運行，因此this等于window；而使用DOM0級方法，事件處理程序會在其所屬元素的作用域中運行。

在IE中使用attachEvent()與使用DOM2級方法的區別：

添加多個事件處理程序的執行順序不同。在IE中使用attachEvent()，可以添加多個事件處理程序，它們會按照添加它們的相反順序觸發；在DOM中使用addEventListener()，可以添加多個事件處理程序，但它們會按照添加它們的順序觸發。

通過attachEvent()添加的事件處理程序只能用detachEvent()來移除，但要求移除時傳入的參數與添加事件處理程序時使用的參數相同，因此通過attachEvent()添加的匿名函數將無法移除，需要給detachEvent()傳入attachEvent()中命名的函數才能正常移除。

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

要保證事件處理程序的代碼在大多數瀏覽器下一致地運行，只需關注冒泡階段。

視情況分別使用DOM2級方法、IE方法、DOM0級方法來添加和移除事件，addHandler()和removeHandler()方法屬于EventUtil對象。

①　先檢測傳入的元素是否存在DOM2級方法（傳入的第三個參數為false以表示冒泡階段）；

②　再檢測傳入的元素是否存在IE的方法；

③　最后檢測傳入的元素是否存在DOM0級方法（使用方括號語法將屬性名指定為事件處理程序）。

var EventUtil = {
  addHandler:function(element, type, handler) {
    if (element.addEventListener)
      element.addEventListener(type, handler, 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);
    else if (element.detachEvent)
      element.detachEvent(“on” + type, handler);
    else
      element["on" + type] = null;
  }
}

PS：關于javascript事件說明可參考本站javascript事件與功能說明大全：http://tools.jb51.net/table/javascript_event

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。