W3C DOM 事件模型(簡述)

1、事件模型

因爲事件捕獲與冒泡模型都有其優點和解釋，DOM標準支持捕獲型與冒泡型，可以說是它們兩者的結合體。它可以在一個DOM元素上綁定多個事件處理器，並且在處理函數內部，this關鍵字仍然指向被綁定的DOM元素，另外處理函數參數列表的第一個位置傳遞事件event對象。首先是捕獲式傳遞事件，接着是冒泡式傳遞，所以，如果一個處理函數既註冊了捕獲型事件的監聽，又註冊冒泡型事件監聽，那麼在DOM事件模型中它就會被調用兩次。

【 oschina】

2、事件傳播

A）冒泡模式(Bubble)IE瀏覽器只支持這種形式的傳播，即事件對象從事件觸發的目標（target）開始，一直傳播到偵聽同樣事件類型的target祖先結點爲止。即作爲全局變量的時間對象沿着”元素樹“向上傳播

B）捕捉模式（Capture）這種模式與冒泡模式正好相反，即事件對象是從目標的外層向目標傳播的，即從樹的根結點向葉子結點傳播。

3、事件註冊

根據 DOM 2 Events 中描述，節點使用 'addEventListener' 和 'removeEventListener' 方法綁定和解綁事件監聽器。

if(add.addEventListener){
    add.addEventListener("click",showMsgB,false);
    remove.addEventListener("click",removeE,false);
}

IE下沒有addEventListener，但是也有自己的attachEvent，即所謂的Microsoft Model。二者的實現基本相同只是attachEvent的第一個參數（事件類型）需要加”on”，而addEventListener不用，另外attachEvent因爲不支持事件捕捉，所以也沒有第三個參數。

if(add.attachEvent){
    add.attachEvent("onclick",showMsgA);
    remove.attachEvent("onclick",removeE);
}

在支持W3C DOM的瀏覽器中，傳統的事件註冊被看作是註冊於冒泡階段。element.onEvent =handler()

4、stopPropagation, preventDefault 和 return false 的區別

stopPropagation()：因爲事件可以在各層級的節點中傳遞, 不管是冒泡還是捕獲, 有時我們希望事件在特定節點執行完之後不再傳遞, 可以使用事件對象的 stopPropagation() 方法。

preventDefault() 阻止後面將要執行的瀏覽器默認動作。

return false 之後的所有觸發事件和動作都不會被執行。

參考資料

DOM事件模型：http://wenku.baidu.com/view/feafe986b9d528ea81c779e3.html

SD9011: 事件模型在各瀏覽器中存在差異：http://w3help.org/zh-cn/causes/SD9011

W3C DOM及其事件模型之初見：http://blog.csdn.net/yczxwestwood/article/details/6412997

stopPropagation, preventDefault 和 return false 的區別：http://www.neoease.com/stoppropagation-and-preventdefault-and-return-false/