js中addEventListener中第3个参数更多的情况研究

最新推荐文章于 2024-06-01 22:25:35 发布

czyhy

最新推荐文章于 2024-06-01 22:25:35 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/czyhy/article/details/39317243

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

借用其他兄弟的成果扩展一下

<div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4;border:1px solid #f00;">d1  
    <div id="id2" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:green; z-index:1;border:1px solid #f00;">d2
         <div id="id3" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:red; z-index:1;border:1px solid #f00;">d3
         </div>
    </div>  
</div>

这里采用了三个监听：

document.getElementById('id1').addEventListener('click', function() { console.log('id1==false');}, false);
document.getElementById('id2').addEventListener('click', function() { console.log('id2==false');}, false);
document.getElementById('id3').addEventListener('click', function() { console.log('id3==true');}, true);

关于第三个参数的设置以及最后冒泡的顺序问题，大致规律可以这么看，如果有更多的监听，那么首先将第三个参数为true的所有监听分为一组放在冒泡的前部，为false的放在后部，即，为true的先响应事件，为FALSE的后响应事件，为true的部分，按照从最外层到最里层的顺序响应，为false的部分按照从里层到外层的顺序响应，这就得到最后的响应顺序，如上例最后的结果是：d3,d2,d1