DOM事件所囊括的知識較為龐雜，本片文章總結一下冒泡和捕獲機制到底是怎麼運作的。

事件流

當我們點選頁面上的一個按鈕的時候，是按鈕最外層的父元素先收到事件並執行，還是這個被我們點選的按鈕先收到事件並執行？所以這兒引入了事件流的概念：事件流所描述的就是從頁面中接受事件的順序。(其實挺起來還是一臉懵懂的！沒錯我當時就是這樣子的。)
事件流也有兩種，分別是事件冒泡和事件捕獲，現行的主流是事件冒泡。下面一一來說：

1、事件冒泡
時間冒泡就是從我們上面提到的被我們點選的那個按鈕開始，先執行按鈕上繫結的事件，執行完之後，繼續往按鈕的父元素執行父元素上繫結的事件。
看這個簡單的程式碼：

<div
 
 id="div1">
        div1
    <div id="div2">
                div2
        <div id="div3">
                    div3
        </div>
    </div>
</div>

div中嵌套了兩個div，js程式碼：

var div1 =document.getElementById('div1');
var div2 =document.getElementById('div2');
var div3 =document.getElementById('div3'
 
);
    div2.addEventListener('click',function(){
       alert('div2');
     },false);
    div1.addEventListener('click',function(){
       alert('div1');
     },false);
    div3.addEventListener('click',function(){
       alert('div3');
     },false);

注意：addEventListener這個方法的第三個引數選false，為冒泡事件，如果是true為我們後面講的捕獲事件。這裡我們執行的輸出為：

當我點選div3的時候，會依次彈出div3，div2，div1。當我點選div2的時候，會依次彈出div2，div1。當我點選div1的時候，只彈出div1。
這個結果說明，事件冒泡是從我們當前點選到的那個div開始的，然後不斷往父元素冒泡。
2、事件捕獲
其實很簡單，我們只要把上面的程式碼中的false改為true：

 var  div1 =document.getElementById('div1');
 var  div2 =document.getElementById('div2');
 var  div3 =document.getElementById('div3');
      div2.addEventListener('click',function(){
        alert('div2');
      },true);
      div1.addEventListener('click',function(){
        alert('div1');
      },true);
      div3.addEventListener('click',function(){
        alert('div3');
      },true);

這樣我們點選div3的時候，會依次彈出div1，div2，div3。當我們點選div2的時候依次彈出div1，div2。當點選div1的時候，只彈出div1。這就是所謂的事件捕獲。
總結：事件捕獲跟冒泡方向是相反的。

這個時候你要問了，如果三個addEventListener中有第三個引數有false又有true怎麼辦？會不會打架？撞車？呵呵，當然不會。其中是有規則的，W3C明智地在這場爭鬥中選擇了一個折中的方案：任何發生在w3c事件模型中的事件，首是進入捕獲階段，直到達到目標元素，再進入冒泡階段。（w3c作為交警指揮了這個雜亂的交通）
當我們把程式碼改成：

var div1 =document.getElementById('div1');
var div2 =document.getElementById('div2');
var div3 =document.getElementById('div3');
    div1.addEventListener('click',function(){
        alert('div1');
      },true);
    div2.addEventListener('click',function(){
        alert('div2');
      },false);
    div3.addEventListener('click',function(){
        alert('div3');

這樣子三個div就有冒泡又有捕獲，這個時候
我們點選div3的時候，依次彈出div1、div3、div2；
點選div2的時候彈出次序為div1、div2。
分析：(認真看一下這個分析，如果有不準確的麻煩告訴寶寶一聲，謝謝)
這三個div有捕獲又又冒泡，根據交警w3c的規則，先找捕獲的，也就是div1，所以當我們點選div3的時候，先執行的是div1上的點選事件，div1執行完了往外走，看看還有沒有那個div是捕獲的，發現沒有了，那麼此時就開始尋找冒泡的。冒泡的順序是從最外一層的div開始往裡面走的，所以此時就找到了div3，執行完div3上的繫結事件之後就往父元素中找，發現誒有div2也是冒泡的哦！果斷執行了div2的事件。所以，最後的彈出順序就是div1–>div3–>div2。
到此我們應該都明白了其中的規律的吧！要是把程式碼改成這樣：

var div1 =document.getElementById('div1');
var div2 =document.getElementById('div2');
var div3 =document.getElementById('div3');
    div1.addEventListener('click',function(){
        alert('div1');
      },false);
    div2.addEventListener('click',function(){
        alert('div2');
      },true);
    div3.addEventListener('click',function(){
        alert('div3');
      },false);

大家應該都猜得到執行結果了吧！我不會告訴你們是div2–>div3–>div1

總結：
冒泡是從目標元素往父元素走，捕獲是從祖宗元素開始往目標元素走；兩個都有的話先捕獲再冒泡。