js-addEventListener()第三個參數useCapture

概述:

　　第3個參數叫做useCapture，是一個boolean值，就是true or false 。如果送出true的話就是瀏覽器會使用Capture方式，false的話是Bubbling，只有在特定狀況下才會有影響，通常建議是false，而會有影響的情形是目標元素(target element)有祖先元素(ancestor element)，而且也有同樣的事件對應函數

html片段

    <div id="div1" style="background: blue;width: 100px; height: 100px;">
        <div id="div2" style="background: red;width: 70px; height: 70px;">
            <div id="div3" style="background: yellow;width: 50px; height: 50px;"></div>
        </div>
    </div>

js代碼

var oDvi1 = document.getElementById('div1'),
    oDvi2 = document.getElementById('div2'),
    oDvi3 = document.getElementById('div3');


// 123 -> 456 -> 345
oDvi1.addEventListener('click', xx1, true);
oDvi2.addEventListener('click', xx2, false);
oDvi3.addEventListener('click', xx3, true);


function xx1(){ //藍
    alert(123);
}

function xx2(){ //紅
    alert(345);
}

function xx3(){//黃
    alert(456);
}

總結:

  在div3上觸發點擊事件

  捕獲階段: 外-》里 * 在div1處檢測 useCapture 是否為true,是則執行程序， div2同理 .

  目標階段: 目標到div3處，發現div3就是鼠標點擊的節點， 所以這里是目標階段。若有事件處理程序，則執行該程序，這里不論 useCapture 為 true 還是 false。

  冒泡階段: 里-》外  在div2處檢測useCapture 是否為false， 是則執行該程序 . div1同理