JS-AddEventListener第三个参数的作用
概述:
第3个参数叫做useCapture，是一个boolean值，就是true or false 。如果送出true的话就是浏览器会使用Capture方式，false的话是Bubbling，只有在特定的情况下会有影响，通常建议是false，而会有影响的情形是目标元素target element有祖先元素ancestor element，而且也有同样的事件对应函数。
<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>
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同理。
