DOM事件標準定義了兩種事件流，這兩種事件流有著顯著的不同并且可能對你的應用有著相當大的影響。這兩種事件流分別是捕獲和冒泡。一般的，事件分為三個階段：捕獲階段、目標階段和冒泡階段。
事件捕獲階段：（Netscape團隊提出）
事件的第一個階段是捕獲階段。事件從文檔的根節點流向目標對象節點。途中經過各個層次的DOM節點，并在各節點上觸發捕獲事件，直到到達事件的目標節點。捕獲階段的主要任務是建立傳播路徑，在冒泡階段，事件會通過這個路徑回溯到文檔跟節點。
目標階段：
當事件到達目標節點的，事件就進入了目標階段。事件在目標節點上被觸發，然后會逆向回流，直到傳播至最外層的文檔節點。
事件冒泡階段：（IE事件流）
事件在目標元素上觸發后，并不在這個元素上終止。它會隨著DOM樹一層層向上冒泡，回溯到根節點。
冒泡過程非常有用。它將我們從對特定元素的事件監聽中釋放出來，如果沒有事件冒泡，我們需要監聽很多不同的元素來確保捕獲到想要的事件。
事件機制（事件傳遞）【定義了元素事件被觸發的先后順序】：包括捕獲和冒泡
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM事件機制</title>
</head>
<body>
<div id='parent1'>
<button id='child1'>btn</button>
</div>
<script>
child1.addEventListener('click',function(){
console.log("捕獲，child");
}
,true);
parent1.addEventListener('click',function(){
console.log("捕獲，parent");
}
,true);
child1.addEventListener('click',function(){
console.log("冒泡，child");
}
,false);
parent1.addEventListener('click',function(){
console.log("冒泡，parent");
}
,false);
</script>
</body>
</html>
</pre>
上面的兩個參數：
true代表捕獲階段調用事件處理程序
false代表冒泡階段調用事件處理程序，默認為false
點擊butto按鈕
事件捕獲：從父級元素出發，先從父級元素觸發，然后子元素觸發。
事件冒泡：子元素觸發，然后父級元素觸發
有個更實際的例子：
<pre>
<div class="first">
testFirst
<div class="second">
testSecond
<div class="third">
testThird
</div>
</div>
</div>
</pre>
js代碼：
<pre>
$(function(){
$('.first').click(function(){
alert("first");
})
$(".second").click(function(){
alert("second");
})
$(".third").click(function(){
alert("third");
})
})
</pre>
點擊third時，會依次彈出third--->second--->first。這個就是很明顯的事件冒泡觸發。
W3C模型將這兩個機制中和了，事件發生時按照：先捕獲然后冒泡執行。
總結：總之要明白什么是事件，什么是事件捕獲和冒泡（順序不同）。
