DOM事件標(biāo)準(zhǔn)定義了兩種事件流，這兩種事件流有著顯著的不同并且可能對(duì)你的應(yīng)用有著相當(dāng)大的影響。這兩種事件流分別是捕獲和冒泡。一般的，事件分為三個(gè)階段：捕獲階段、目標(biāo)階段和冒泡階段。
事件捕獲階段：（Netscape團(tuán)隊(duì)提出）
事件的第一個(gè)階段是捕獲階段。事件從文檔的根節(jié)點(diǎn)流向目標(biāo)對(duì)象節(jié)點(diǎn)。途中經(jīng)過各個(gè)層次的DOM節(jié)點(diǎn)，并在各節(jié)點(diǎn)上觸發(fā)捕獲事件，直到到達(dá)事件的目標(biāo)節(jié)點(diǎn)。捕獲階段的主要任務(wù)是建立傳播路徑，在冒泡階段，事件會(huì)通過這個(gè)路徑回溯到文檔跟節(jié)點(diǎn)。
目標(biāo)階段：
當(dāng)事件到達(dá)目標(biāo)節(jié)點(diǎn)的，事件就進(jìn)入了目標(biāo)階段。事件在目標(biāo)節(jié)點(diǎn)上被觸發(fā)，然后會(huì)逆向回流，直到傳播至最外層的文檔節(jié)點(diǎn)。
事件冒泡階段：（IE事件流）
事件在目標(biāo)元素上觸發(fā)后，并不在這個(gè)元素上終止。它會(huì)隨著DOM樹一層層向上冒泡，回溯到根節(jié)點(diǎn)。
冒泡過程非常有用。它將我們從對(duì)特定元素的事件監(jiān)聽中釋放出來，如果沒有事件冒泡，我們需要監(jiān)聽很多不同的元素來確保捕獲到想要的事件。
事件機(jī)制（事件傳遞）【定義了元素事件被觸發(fā)的先后順序】：包括捕獲和冒泡
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM事件機(jī)制</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>
上面的兩個(gè)參數(shù)：
true代表捕獲階段調(diào)用事件處理程序
false代表冒泡階段調(diào)用事件處理程序，默認(rèn)為false
點(diǎn)擊butto按鈕
事件捕獲：從父級(jí)元素出發(fā)，先從父級(jí)元素觸發(fā)，然后子元素觸發(fā)。
事件冒泡：子元素觸發(fā)，然后父級(jí)元素觸發(fā)
有個(gè)更實(shí)際的例子：
<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>
點(diǎn)擊third時(shí)，會(huì)依次彈出third--->second--->first。這個(gè)就是很明顯的事件冒泡觸發(fā)。
W3C模型將這兩個(gè)機(jī)制中和了，事件發(fā)生時(shí)按照：先捕獲然后冒泡執(zhí)行。
總結(jié)：總之要明白什么是事件，什么是事件捕獲和冒泡（順序不同）。
