簡單理解：

事件冒泡：頁面上有這麼一個節點樹，div>ul>li>a;比如給最裡面的a加一個click點選事件，那麼這個事件就會一層一層的往外執行，執行順序a>li>ul>div，即自下而上觸發事件。

事件捕獲: 跟上面的正好相反，自上而下觸發事件，也就是從外到裡。

示例：

<ul id="ul1">
    <li id="li1">111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
 

繫結事件：

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

現在去點選111那行，執行結果是：

li事件被觸發，li1
ul事件被觸發，ul1
 

很明顯是事件冒泡，自下而上，從裡向外觸發事件。

要注意：繫結事件方法有3個引數，第三個引數就是控制事件觸發順序是否為事件捕獲。true,事件捕獲；false,事件冒泡。預設false,即事件冒泡。

改變引數，測試事件捕獲：

document.getElementById("ul1").addEventListener("click",function(e){
                alert("ul事件被觸發，"+this.id);
            },true)
document.getElementById("li1").addEventListener("click",function(e){
                alert("li事件被觸發，"+this.id)
            },true)
 

現在去點選111那行：

ul事件被觸發，ul1
li事件被觸發，li1

執行結果顯示，從外向裡執行事件。

應用：

事件委託會用到事件冒泡的原理：也就是說只需要給ul繫結事件就可以了，點選li時由於冒泡機制會自己執行ul繫結的事件，從而避免li過多，逐條繫結事件造成的效能問題