js-addEventListener()第三个参数useCapture

js-addEventListener()第三个参数useCapture

概述:

　　第3个参数叫做useCapture，是一个boolean值，就是true or false 。如果送出true的话就是浏览器会使用Capture方式，false的话是Bubbling，只有在特定状况下才会有影响，通常建议是false，而会有影响的情形是目标元素(target element)有祖先元素(ancestor element)，而且也有同样的事件对应函数

html片段

    < div id =“ div1” style =“背景：蓝色；宽度：100px；高度：100px;” > 
        < div id =“ div2” style =“ background：red; width：70px; height：70px;” > 
            < div id =“ div3” style =“背景：黄色；宽度：50像素；高度：50像素；” > </ 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同理