轉自：http://www.jb51.net/article/42492.htm
（1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
（2）捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發，然后到最精確(也可以在窗口級別捕獲事件，不過必須由開發人員特別指定)。
（3）DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結束。
DOM事件模型最獨特的性質是，文本節點也觸發事件(在IE中不會)。
支持W3C標准的瀏覽器在添加事件時用addEventListener(event,fn,useCapture)方法，基中第3個參數 useCapture是一個Boolean值，用來設置事件是在事件捕獲時執行，還是事件冒泡時執行。而不兼容W3C的瀏覽器(IE)用 attachEvent()方法，此方法沒有相關設置，不過IE的事件模型默認是在事件冒泡時執行的，也就是在useCapture等於false的時候 執行，所以把在處理事件時把useCapture設置為false是比較安全，也實現兼容瀏覽器的效果。
事件捕獲階段：事件從最上一級標簽開始往下查找，直到捕獲到事件目標(target)。
事件冒泡階段：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標簽。
假設一個元素div，它有一個下級元素p。
<div>
<p>元素</p>
</div>
這兩個元素都綁定了click事件，如果用戶點擊了p，它在div和p上都觸發了click事件，那這兩個事件處理程序哪個先執行呢？事件順序是什么？
兩種模型
以前，Netscape和Microsoft是不同的實現方式。
Netscape中，div先觸發，這就叫做事件捕獲。
Microsoft中，p先觸發，這就叫做事件冒泡。
兩種事件處理順序剛好相反。IE只支持事件冒泡，Mozilla, Opera 7 和 Konqueror兩種都支持，舊版本的Opera's 和 iCab兩種都不支持 。
事件捕獲
當你使用事件捕獲時，父級元素先觸發，子級元素后觸發，即div先觸發，p后觸發。
事件冒泡
當你使用事件冒泡時，子級元素先觸發，父級元素后觸發，即p先觸發，div后觸發。
W3C模型
W3C模型是將兩者進行中和，在W3C模型中，任何事件發生時，先從頂層開始進行事件捕獲，直到事件觸發到達了事件源元素。然后，再從事件源往上進行事件冒泡，直到到達document。
程序員可以自己選擇綁定事件時采用事件捕獲還是事件冒泡，方法就是綁定事件時通過addEventListener函數，它有三個參數，第三個參數若是true，則表示采用事件捕獲，若是false，則表示采用事件冒泡。
ele.addEventListener('click',doSomething2,true)
true=捕獲
false=冒泡
傳統綁定事件方式
在一個支持W3C DOM的瀏覽器中，像這樣一般的綁定事件方式，是采用的事件冒泡方式。
ele.onclick = doSomething2
IE瀏覽器
如上面所說，IE只支持事件冒泡，不支持事件捕獲，它也不支持addEventListener函數，不會用第三個參數來表示是冒泡還是捕獲，它提供了另一個函數attachEvent。
ele.attachEvent("onclick", doSomething2);
附：事件冒泡（的過程）：事件從發生的目標（event.srcElement||event.target）開始，沿着文檔逐層向上冒泡，到document為止。
事件的傳播是可以阻止的：
• 在W3c中，使用stopPropagation（）方法
• 在IE下設置cancelBubble = true；
在捕獲的過程中stopPropagation（）；后，后面的冒泡過程也不會發生了~
3.阻止事件的默認行為，例如click <a>后的跳轉~
• 在W3c中，使用preventDefault（）方法；
• 在IE下設置window.event.returnValue = false;
首先講解一下js中preventDefault和stopPropagation兩個方法的區別：
preventDefault 方法的起什么作用呢？我們知道比如<a href="http://www.baidu.com">百度</a>,這是html中最基礎的東西，起的作用就是點擊百度鏈接到 http://www.baidu.com,這是屬於<a>標簽的默認行為，而preventDefault方法就是可以阻止它的默認行為的 發生而發生其他的事情。看一段代碼大家就明白了：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS阻止鏈接跳轉</title>
<script type="text/javascript">
function stopDefault( e ) {
if ( e && e.preventDefault )
e.preventDefault();
else
window.event.returnValue = false;
return false;
}
</script>
</head>
<body>
<a href="http://www.baidu.com" id="testLink">百度</a>
<script type="text/javascript">
var test = document.getElementById('testLink');
test.onclick = function(e) {
alert('我的鏈接地址是：' + this.href + ', 但是我不會跳轉。');
stopDefault(e);
}
</script>
</body>
</html>
此時點擊百度鏈接，不會打開http://www.baidu.com，而只是彈出一個alert對話框。
preventDefault方法講解到這里，stopPropagation方法呢？講stopPropagation方法之前必需先給大家講解一下js的事件代理。
事件代理用到了兩個在JavaSciprt事件中常被忽略的特性：事件冒泡以及目標元素。當一個元素上的事件被觸發的時候，比如說鼠標點擊了一個按 鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。對任何一個事件來 說，其目標元素都是原始元素，在我們的這個例子中也就是按鈕。目標元素它在我們的事件對象中以屬性的形式出現。使用事件代理的話我們可以把事件處理器添加 到一個元素上，等待事件從它的子級元素里冒泡上來，並且可以很方便地判斷出這個事件是從哪個元素開始的。
stopPropagation方法就是起到阻止js事件冒泡的作用，看一段代碼。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312">
<head>
<title> 阻止JS事件冒泡傳遞（cancelBubble 、stopPropagation）</title>
<meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" />
<script>
function doSomething (obj,evt) {
alert(obj.id);
var e=(evt)?evt:window.event;
if (window.event) {
e.cancelBubble=true;// ie下阻止冒泡
} else {
//e.preventDefault();
e.stopPropagation();// 其它瀏覽器下阻止冒泡
}
}
</script>
</head>
<body>
<div id="parent1" onclick="alert(this.id)" style="width:250px;
<p>This is parent1 div.</p>
<div id="child1" onclick="alert(this.id)" style="width:200px;
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;">
<p>This is parent2 div.</p>
<div id="child2" onclick="doSomething(this,event);" style="width:200px;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</HTML>
大家運行一下上面的代碼就明白了。