js-addEventListener()第三个参数useCapture
浏览数：27 /
时间：2015年06月09日
概述:
第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同理
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
