DOM
首先，DOM全稱是Document Object Model，即文檔對象模型。DOM是W3C的標准，定義了訪問 HTML 和 XML 文檔的標准。
“W3C 文檔對象模型 （DOM） 是中立於平台和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。”
DOM事件
DOM使Javascript有能力對HTML上的事件做出反應。這些事件包括鼠標鍵盤的點擊事件、移動事件以及頁面中內容的變化等。HTML元素事件是瀏覽器內在自動產生的,當有事件發生時html元素會向外界(這里主要指元素事件的訂閱者)發出各種事件,如click,onmouseover,onmouseout等等。
DOM事件流
DOM的結構是一個樹形，每當HTML元素產生事件時，該事件就會在樹的根節點和元素節點之間傳播，所有經過的節點都會收到該事件。
DOM事件模型
DOM事件模型分為兩類：一類是IE所使用的冒泡型事件（Bubbling）；另一類是DOM標准定義的冒泡型與捕獲型（Capture）的事件。除IE外的其他瀏覽器都支持標准的DOM事件處理模型。
冒泡型事件處理模型（Bubbling）
如上圖所示，冒泡型事件處理模型在事件發生時，首先在最精確的元素上觸發，然后向上傳播，直到根節點。反映到DOM樹上就是事件從葉子節點傳播到根節點。
捕獲型事件處理模型（Captrue）
相反地，捕獲型在事件發生時首先在最頂級的元素上觸發，傳播到最低級的元素上。在DOM樹上的表現就是由根節點傳播到葉子節點。
標准的DOM事件處理模型
標准的事件處理模型分為三個階段：
- 父元素中所有的捕捉型事件（如果有）自上而下地執行
- 目標元素的冒泡型事件（如果有）
- 父元素中所有的冒泡型事件（如果有）自下而上地執行
注冊事件監聽
1.傳統方式的事件模型即直接在DOM元素上綁定事件處理器，例如—
window.onload=function(){…} obj.onmouseover=function(e){…} obj.onclick=function(){…}
首先這種方式是無論在IE還是Firefox等其他瀏覽器上都可以成功運行的通用方式。這便是它最大的優勢了，而且在Event處理函數內部的this變量無一例外的都只想被綁定的DOM元素，這使得Js程序員可以大大利用this關鍵字做很多事情。
至於它的缺點也很明顯，就是傳統方式只支持Bubbling，而不支持Capturing，並且一次只能綁定一個事件處理器在DOM元素上，無法實現多Handler綁定。最后就是function參數中的event參數只對非IE瀏覽器有效果(因為IE瀏覽器有特制的window.event)。
2、W3C (Firefox.e.g) Event Module
Firefox等瀏覽器很堅決的遵循W3C標准來制定瀏覽器事件模型，使用addEventListener和removeEventListener兩個函數，看幾個例子—
window.addEventListener(‘load’,function(){…},false); document.body.addEventListener(‘keypress’,function{…},false); obj.addEventListener(‘mouseover’,MV,true); function MV(){…}
addEventListener帶有三個參數，第一個參數是事件類型，就是我們熟知的那些事件名字去掉前面的’on’，第二個參數是處理函數，可以直接給函數字面量或者函數名，第三個參數是boolean值，表示事件是否支持Capturing。
W3C的事件模型優點是Bubbling和Capturing都支持，並且可以在一個DOM元素上綁定多個事件處理器，各自並不會沖突。並且在處理函數內部，this關鍵字仍然可以使用只想被綁定的DOM元素。另外function參數列表的第一個位置(不管是否顯示調用)，都永遠是event對象的引用。
至於它的缺點，很不幸的就只有在市場份額最大的IE瀏覽器下不可使用這一點。
3、IE Event Module
IE自己的事件模型跟W3C的類似，但主要是通過attachEvent和detachEvent兩個函數來實現的。依舊看幾個例子吧—
window.attachEvent(‘onload’,function(){…}); document.body.attachEvent(‘onkeypress’,myKeyHandler);
可以發現它跟W3C的區別是沒有第三個參數，而且第一個表示事件類型的參數也必須把’on’給加上。這種方式的優點就是能綁定多個事件處理函數在同一個DOM元素上。
至於它的缺點，為什么如今在實際開發中很少見呢？首先IE瀏覽器本身只支持Bubbling不支持Capturing；而且在事件處理的function內部this關鍵字也無法使用，因為this永遠都只想window object這個全局對象。要想得到event對象必須通過window.event方式，最后一點，在別的瀏覽器中，它顯然是無法工作的。