事件冒泡階段：事件從事件目標(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;

在學校，聽老師講解事件冒泡和事件捕獲機制的時候跟聽天書一樣，只依稀記得IE使用的是事件冒泡，其他瀏覽器則是事件捕獲。當時的我，把它當成IE瀏覽器相容問題，所以沒有深究（IE8以下版本的瀏覽器已基本退出市場）。工作至今，雖然多次遇到該類問題，但均未深究，始終一知半解，遇到了全TM靠猜（選A不行就選B唄）。今天閒來無事自己做了個demo,算是把這個問題徹底搞明白了。

先上結論：他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。相反的，事件冒泡是自下而上的去觸發事件。繫結事件方法的第三個引數，就是控制事件觸發順序是否為事件捕獲。true,事件捕獲；false,事件冒泡。預設false,即事件冒泡。Jquery的e.stopPropagation會阻止冒泡，意思就是到我為止，我的爹和祖宗的事件就不要觸發了。

這是HTML結構

<div id="parent">
　　<div id="child" class="child"></div>
</div>

現在我們給它們繫結上事件

            document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被觸發，"+this.id);
            })
            document.getElementById("child").addEventListener("click",function
 
(e){
                alert("child事件被觸發，"+this.id)
            })

結果：

child事件被觸發，child
parent事件被觸發，parent

結論：先child，然後parent。事件的觸發順序自內向外，這就是事件冒泡。

現在改變第三個引數的值為true

　　　　　document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被觸發，"+e.target.id);
            },true)
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被觸發，"+e.target.id)
            },true)

結果：

parent事件被觸發，parent
child事件被觸發，child

結論：先parent,然後child。事件觸發順序變更為自外向內，這就是事件捕獲。

貌似沒什麼卵用，上一個利用事件冒泡的案例，反正我是經常會用到。

<ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
            <li>item6</li>
        </ul>

需求是這樣的：滑鼠放到li上對應的li背景變灰。

利用事件冒泡實現：

$("ul").on("mouseover",function(e){
                $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
            })

也許有人會說，我們直接給所有li都綁上事件也可以啊，一點也不麻煩，只要……

$("li").on("mouseover",function(){
                $(this).css("background-color","#ddd").siblings().css("background-color","white");
            })

是，這樣也行。而且從程式碼簡潔程度上，兩者是相若彷彿的。但是，前者少了一個遍歷所有li節點的操作，所以在效能上肯定是更優的。

還有就是，如果我們在繫結事件完成後，頁面又動態的載入了一些元素……

$("<li>item7</li>").appendTo("ul");

這時候，第二種方案，由於繫結事件的時候item7還不存在，所以為了效果，我們還要給它再繫結一次事件。而利用冒泡方案由於是給ul綁的事件……

高下立判！