addEventListener第三个参数useCapture说明
addEventListener第三个参数useCapture为布尔变量(true/false),用于指定事件使用冒泡(false)还是捕获(capture)方式,一般设置未false,使用冒泡方式。
以下面示例说明addEventListener第三个参数useCapture配置不同值,点击最里层Level3执行顺序。
<title>addEventListener第三个参数useCapture说明</title> <style>div{border:solid 1px #000;width:300px;height:300px}div div{width:70%;height:70%}</style> <div id="d1">Level1 <div id="d2">Level2 <div id="d3">Level3</div> </div> </div> <script> function func(e) { /*e.stopPropagation();*/ alert(this.firstChild.data); } d1.addEventListener('click', func, true);//stopPropagation无法阻止冒泡执行 d2.addEventListener('click', func, false);//点击Level3,为true时将会是1,2,3顺序 d3.addEventListener('click', func, false); </script>
addEventListener useCapture为false,将会使用冒泡方式,可以通过事件对象stopPropagation阻止自身和父容器绑定事件中useCapture为false的执行。(上面代码执行顺序为:Level1->Level3->Level2),就是从里到外相应事件(如果父容器有绑定事件)。
addEventListener useCapture为true,则和冒泡反过来,从最外层父容器向内部执行,从外到里相应,需要注意为true时,无法通过event.stopPropagation()阻止父容器事件执行,stopPropagation是阻止冒泡用的。
加支付宝好友偷能量挖...
原创文章,转载请注明出处:addEventListener第三个参数useCapture说明