事件

就是事件處理程序狂窑，也就是事件發(fā)生后的處理動作，對應到瀏覽器的交互模型中桑腮，用戶點擊了一個按鈕泉哈，這就是一個事件，也就是發(fā)生了用戶點擊按鈕這么件事破讨，對應的做法就是我們提前寫好的事件處理程序執(zhí)行

事件流

事件流描述的是從頁面中接收事件的順序丛晦，比如有兩個嵌套的div，點擊了內(nèi)層的div提陶，這時候是內(nèi)層的div先觸發(fā)click事件還是外層先觸發(fā)烫沙？目前主要有三種模型

IE的事件冒泡：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素

Netscape的事件捕獲：不太具體的節(jié)點更早接收事件隙笆，而最具體的元素最后接收事件锌蓄，和事件冒泡相反

DOM事件流：DOM2級事件規(guī)定事件流包括三個階段，事件捕獲階段撑柔，處于目標階段瘸爽，事件冒泡階段，首先發(fā)生的是事件捕獲铅忿，為截取事件提供機會蝶糯，然后是實際目標接收事件，最后是冒泡階段辆沦。

事件處理程序

我們也稱之為事件偵聽器（listener），事件就是用戶或瀏覽器自身執(zhí)行的某種動作识虚。比如click肢扯、load、mouseover等担锤，都是事件類型（俗稱事件名稱）蔚晨，而響應某個事件的方法就叫做事件處理程序或者事件監(jiān)聽器

事件處理程序

我們也稱之為事件偵聽器（listener），事件就是用戶或瀏覽器自身執(zhí)行的某種動作。比如click铭腕、load银择、mouseover等，都是事件類型（俗稱事件名稱）累舷，而響應某個事件的方法就叫做事件處理程序或者事件監(jiān)聽器

也就是我們需要提前定義好某些事件發(fā)生了該怎么處理浩考，這個過程叫做綁定事件處理程序，了解了這些被盈，我們看看如何給元素添加事件處理程序

一種是HTML內(nèi)嵌方式

一種是JAVASCRIPT指定的處理程序

通過JavaScript指定事件處理程序就是把一個方法賦值給一個元素的事件處理程序?qū)傩浴?/p>

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.onclick = function showMessage() {
        alert(this.id);
    };

    btnClick.onclick = function showMessage() {
        alert("Hello,world");
    };
</script>

這樣處理析孽，事件處理程序被認為是元素的方法，事件處理程序在元素的作用域下運行只怎，this就是當前元素袜瞬，所以點擊button結(jié)果是：btnClick

這樣還有一個好處，我們可以刪除事件處理程序身堡，只需把元素的onclick屬性賦為null即可

DOM2級事件定義了兩個方法用于處理指定和刪除事件處理程序的操作：

addEventListener
removeEventListener
所有的DOM節(jié)點都包含這兩個方法邓尤，并且它們都接受三個參數(shù)：

1.事件類型
2.事件處理方法
3.布爾參數(shù)，如果是true表示在捕獲階段調(diào)用事件處理程序贴谎，如果是false汞扎，則是在事件冒泡階段處理
剛才的例子我們可以這樣寫

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.addEventListener('click', function() {
        alert(this.id);
    }, false);

btnClick.addEventListener('click', function() {
        alert('Hello!');
    }, false);
</script>

不過有一個好處，我們可以為click事件添加多個處理程序.

那么 DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別赴精？
Dom0 定義的事件：后面的會覆蓋前面的onclick佩捞，也會覆蓋行內(nèi)的onclick。

而DOM2 則不會出現(xiàn)后面的事件覆蓋前面的事件蕾哟。

IE兼容性

IE瀏覽器沒有上述的兩個方法一忱，有類似的自己的定義的方法：
attachEvent和detachEvent
都接受兩個參數(shù) ： 事件處理程序名稱和事件處理程序方法

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');

    var handler=function() {
        alert(this.id);
    }

    btnClick.attachEvent('onclick', handler);
    btnClick.detachEvent('onclick', handler);
</script>

結(jié)果是undefined，很奇怪谭确，為什么帘营？
我們現(xiàn)在來總結(jié)一下addEventListener和attachEvent區(qū)別：

事件對象

在觸發(fā)DOM上的某個事件的時候會產(chǎn)生一個事件對象event，這個對象包含著所有與事件有關(guān)的信息肠骆，包括產(chǎn)生事件的元素算途、事件類型等相關(guān)信息。所有瀏覽器都支持event對象蚀腿，但支持方式不同嘴瓤。

跨瀏覽器的事件對象

雖然DOM和IE的event對象不同，但基于它們的相似性，我們還是可以寫出跨瀏覽器的事件對象方案

function getEvent(e) {
    return e || window.event;
}

function getTarget(e) {
    return e.target || e.scrElement;
}

function preventDefault(e) {
    if (e.preventDefault)
        e.preventDefault();
    else
        e.returnValue = false;
}

function stopPropagation(e) {
    if (e.stopPropagation)
        e.stopPropagation();
    else
        e.cancelBubble = true;
}

解釋IE事件冒泡和DOM2事件傳播機制廓脆？

參考文獻
饑人谷