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说明
评论(0)Web开发网
阅读(77)喜欢(0)不喜欢(0)JavaScript/Ajax