當滑鼠點選所看到的的按鈕時，其實發生了一系列的事件傳遞，可以想象一下，button實際上是被body“包裹”起來的，body是被html“包裹”起來的，html是被document“包裹”起來的，document是被window“包裹”起來的。所以，在你的滑鼠點下去的時候，最先獲得這個點選的是最外面的window，然後經過一系列傳遞才會傳到最後的目標button，當傳到button的時候，這個事件又會像水底的泡泡一樣慢慢往外層穿出，直到window結束。

綜上，一個事件的傳遞過程包含三個階段，分別稱為：

捕獲階段，目標階段，冒泡階段

目標指的就是包裹得最深的那個元素。

例項：

<div id='d'>
    <p id='p'>
        <span id='s'>Click Me!</span>
    </p>
</div>

var div = document.getElementById('d');
var p = document.getElementById('p');
var span = document.getElementById('s');

function onClickFn (event) {
    var tagName = event.currentTarget.tagName;
    var phase = event.eventPhase;
    console.log(tagName + "  " + phase);
}

div.addEventListener('click', onClickFn, false);
p.addEventListener('click', onClickFn, false);
 

此時，點選“Click Me!”，即可在控制檯看到如下結果：

P 3
DIV 3

phase為3說明事件在冒泡階段響應的。數字對應三個階段3：冒泡階段，2：目標階段，1：捕獲階段
將引數改為true將看到：

DIV 1
P 1

由此，addEventListener的第三個引數設定為true和false的區別已經非常清晰了：

true表示該元素在事件的“捕獲階段”（由外往內傳遞時）響應事件；

false表示該元素在事件的“冒泡階段”（由內向外傳遞時）響應事件。