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; 100px; height: 100px;">
        <div id="div2" style="background: red; 70px; height: 70px;">
            <div id="div3" style="background: yellow; 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同理