我們知道JavaScript與HTML之間的交互是通過(guò)事件實(shí)現(xiàn)的。事件最早是在IE3和Netscape Navigator 2中出現(xiàn)的，當(dāng)時(shí)是作為分擔(dān)服務(wù)器運(yùn)算負(fù)載的一種手段。 通俗地理解，事件就是用戶(hù)或瀏覽器自身執(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)介紹。

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

例1：

這條代碼即為事件處理程序，點(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ǔ)法字符。

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

例3：

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

這個(gè)例子中我們調(diào)用函數(shù)，而把函數(shù)定義放在了script中，這樣也是可以的。因?yàn)椋?span>事件處理程序中的代碼在執(zhí)行時(shí)，有權(quán)訪(fǎng)問(wèn)到全局作用域中的任何代碼。這句話(huà)怎么理解呢？ 實(shí)際上，我們可以在chrome中觀察button標(biāo)簽的作用域鏈。如下所示：

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

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

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

例5：

這時(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ì)浮出水面。

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

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

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

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

例6：

即我們先在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í)方法指定的事件處理程序。

通過(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)題舉例如下：

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

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：

結(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：

上述代碼貌似可以移除click的事件處理程序，但是通過(guò)實(shí)驗(yàn)證明是不可以的，原因是：事件處理程序?yàn)槟涿瘮?shù)時(shí)無(wú)法移除。看下面的成功移除的例子：

例9：

成功移除！

注意：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)看看吧。