js 事件冒泡和事件捕获

最新推荐文章于 2024-06-22 15:02:51 发布

飞马攻城师

最新推荐文章于 2024-06-22 15:02:51 发布

阅读量303

点赞数

分类专栏： javascript 文章标签： javascript 冒泡和捕获事件

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

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

介绍：

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

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

例：

<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事件（只有在最外层元素设置第三个参数，才能产生捕获事件）

飞马攻城师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 事件冒泡和事件捕获

介绍：事件传递有两种方式：冒泡与捕获。事件冒泡：内部元素的事件会先被触发，然后再触发外部元素例： &lt;body&gt; &lt;div id="maopao" style="background-color:red;height:100px;width:100px;padding:30px"&gt; &lt;div class="ma...
复制链接

扫一扫

专栏目录