js 事件冒泡和事件捕获

介绍：

事件传递有两种方式：冒泡与捕获。

事件冒泡：内部元素的事件会先被触发，然后再触发外部元素

例：

<body>
    <div id="maopao"  style="background-color:red;height:100px;width:100px;padding:30px">
        <div  class="maopao1" style="background-color:green;width:100px;height:100px;line-height: 100px;color:#fff;" >冒泡事件</div>
    </div>
</body>

<script type="text/javascript">
    document.getElementById("maopao1").addEventListener('click',function(){
        confirm('这是p元素事件');
    })
    document.getElementById("maopao").addEventListener("click",function(){
        confirm('这是div事件');
    });
</script>

第三个参数没设置，则默认为冒泡事件，点击绿色区域，先触发maopao1事件，再触发maopao事件

事件捕获：外部元素的事件会先被触发，然后才会触发内部元素的事件
例

<script type="text/javascript">
    document.getElementById("maopao1").addEventListener('click',function(){
        confirm('这是p元素事件');
    })
    document.getElementById("maopao").addEventListener("click",function(){
        confirm('这是div事件');
    },true);
</script>

第三个参数没设置，则默认为捕获事件，点击绿色区域，先触发maopao事件，再触发maopao1事件（只有在最外层元素设置第三个参数，才能产生捕获事件）

来源：CSDN

作者：change_any_time

链接：https://blog.csdn.net/change_any_time/article/details/79721469

标签

confirm

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!