在瀏覽器解析事件的時候，有兩種觸發方式，一種叫做Bubbling(冒泡)，另外一種叫做Capturing(捕獲)。由上圖可以看出來，冒泡的方式效果就是當一個DOM元素的某事件例如click事件被fire時，依次它的父元素的click事件也被fire(觸發)，一直傳遞到最頂層的body元素為止。而捕獲的觸發方式正好相反，當某個元素的click事件被觸發時，先從最頂層的body元素click事件被觸發開始，一直傳遞到真正被觸發的元素為止。

****************************************************************************

這次我將討論W3C的標準DOM事件模型和IE獨立門戶的DOM事件模型到底有多少區別，首先我們可以回想一下目前大多數Js程式設計師習慣如何繫結事件到DOM元素上，最常見的就是obj.onclick=handler這種方式(更惡劣的是在Html程式碼的元素標籤中直接加上onclick屬性，完全沒達到檢視和動作分開的原則)。我們暫時稱這種方式的事件新增為Traditional(傳統方式)吧，IE有自己的IE Event Module，而火狐等瀏覽器則遵循的W3C方式的Event Module，下面看看這三者各自的優缺點在哪裡——

1、Traditional Module

傳統方式的事件模型即直接在DOM元素上繫結事件處理器，例如—

window.onload=function(){…}

obj.onmouseover=function(e){…}

obj.onclick=function(){…}

首先這種方式是無論在IE還是Firefox等其他瀏覽器上都可以成功執行的通用方式。這便是它最大的優勢了，而且在Event處理函式內部的this變數無一例外的都只想被繫結的DOM元素，這使得Js程式設計師可以大大利用this關鍵字做很多事情。

至於它的缺點也很明顯，就是傳統方式只支援Bubbling，而不支援Capturing，並且一次只能繫結一個事件處理器在DOM元素上

2、W3C (Firefox.e.g) EventModule

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方式，最後一點，在別的瀏覽器中，它顯然是無法工作的。

最後我在推薦兩個必須知道的IE和W3C標準的區別用法吧—

1、當我們需要阻止瀏覽器某DOM元素的預設行為的時候在W3C下呼叫e.preventDefault()，而在IE下則通過window.event.returnValue＝false來實現。

2、當我們要阻止事件冒泡的時候，在W3C標準裡呼叫e.stopPropagation()，而在IE下通過設定window.event.cancelBubble=true來實現。