冒泡与捕获

最新推荐文章于 2024-03-17 22:23:15 发布

Judian6974

最新推荐文章于 2024-03-17 22:23:15 发布

阅读量568

点赞数

分类专栏： JS 事件文章标签：冒泡与捕获事件的冒泡与捕获

本文链接：https://blog.csdn.net/Judian6974/article/details/76998952

版权

JS 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

事件

3 篇文章 0 订阅

订阅专栏

html>

    
   
   
    
    



   
   
    
    
    捕获和冒泡的演示

   
   

<script>
    var div1 = document.getElementById("div1");
    var p1 = document.getElementById("p1");
    p1.addEventListener("click",click1);
    div1.addEventListener("click",click2);//捕获+true，结果则与冒泡相反弹出

    function click1(){
        alert("段落被单机了");
    }
    function click2(){
        alert("div被单机了");
    }
</script>

在这个案例中，如果单机文字，先提示“段落被单机”，然后再提示“div被单机”。因为div是段落的父容器，所以单机段落也就是单机了div，所以两者都会触发这个事件。

但是如何去规定两个事件的处理顺序呢？这就是事件的冒泡和捕获。

冒泡：按照从内到外的顺序依次触发，默认方式；

捕获：反之