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

創(chuàng)新互聯(lián)是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計公司的優(yōu)秀設(shè)計人員和策劃人員組成的一個具有豐富經(jīng)驗的團(tuán)隊，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計師、平面廣告設(shè)計師、網(wǎng)絡(luò)營銷人員及形象策劃。承接：成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)頁設(shè)計制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺等全方位的服務(wù)。

JavaScript和HTML之間的交互是通過事件實現(xiàn)的。

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

事件流：

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

1) 事件冒泡

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

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

2) 事件捕獲

不太具體的節(jié)點應(yīng)該更早接收到事件，而最具體的節(jié)點應(yīng)該最后接收到事件。事件捕獲的用意在于事件到達(dá)預(yù)定目標(biāo)之前捕獲它。

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

DOM事件流：

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

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

事件處理程序：

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

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

1) HTML事件處理程序

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

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

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

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

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

2) DOM0級事件處理程序

通過JavaScript指定事件處理程序的傳統(tǒng)方式，將一個函數(shù)賦值給一個事件處理程序?qū)傩浴Ｊ褂肈OM0級方法指定的事件處理程序被認(rèn)為是元素的方法，因此this引用當(dāng)前元素。

DOM0級事件處理程序的優(yōu)勢：

①　簡單；

②　跨瀏覽器

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

3) DOM2級事件處理程序

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

DOM2級事件處理程序的優(yōu)勢：

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

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

4) IE事件處理程序

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

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

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

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

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

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

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

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

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

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

①　先檢測傳入的元素是否存在DOM2級方法（傳入的第三個參數(shù)為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;
  }
}

文章題目：JavaScript中為事件指定處理程序的五種方式分析-創(chuàng)新互聯(lián)
文章起源：http://jinyejixie.com/article42/dpodec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、ChatGPT、網(wǎng)站排名、外貿(mào)建站、網(wǎng)站內(nèi)鏈、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)