W3C DOM 事件模型(簡述)

一、事件模型

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

【 oschina】

二、事件傳播

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

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

三、事件註冊

依據 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()

四、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/