DOM事件傳播模型

[url=事件模型[/url]

見下圖：

[img]

標準dom2的事件傳播模型分2個階段：

首先是捕獲階段(capture prase)：從document物件起向下傳播，直至到達目標物件(此過程ie不支援)。若目標物件的父節點註冊了捕捉型的事件處理函式(見例1),則該函式會在事件到達目標物件前呼叫一次。

然後是起泡階段：從目標物件起向document物件傳播，即起泡(bulling)。若父節點註冊了同類的事件處理函式，則也會呼叫。

單擊#out,則執行順序：

out捕捉型事件==>in，捕獲型事件==>out非捕捉型事件。

由於是單擊，所以無論是向下還是向上傳播都只會執行click事件，dbclick因此不執行。首先向下傳播，在目標物件的父節點中只遇到了乙個捕捉型事件；然後執行目標物件上的單擊事件；再起泡(bulling)，執行父節點上對應的非捕獲型單擊事件，這也說明捕獲型事件只在捕獲階段執行。

[b]重要[/b]：chrome,ff沒有完全遵循dom2標準，注意這一行：

inner.addeventlistener('click',function(event),true);

它是目標物件，且註冊了捕獲型事件，dom2標準規定捕獲型事件的設計初衷是讓事件在傳播到目標物件之前執行，因此其必須只能在目標物件的父節點上執行，而這裡明顯違背。

另外：不要將這裡的capture階段和ie事件模型中的setcapture混為一談。後者用來捕獲所有的滑鼠事件(mouseevent)，使得無論滑鼠在**，即使移出了視窗也能觸發滑鼠事件。