javascrpit 事件捕获和事件冒泡

最新推荐文章于 2025-04-19 12:49:59 发布

cvper

最新推荐文章于 2025-04-19 12:49:59 发布

阅读量749

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/cvper/article/details/79855972

JavaScript 专栏收录该内容

42 篇文章

订阅专栏

本文通过实例详细解释了事件捕获和事件冒泡的概念，展示了这两种事件传播方式的区别，并提供了具体的HTML和JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件捕获和事件冒泡涉及到了事件的流程，我们先来看一个例子：

一、添加事件监听：给 window 添加点击的监听事件，输出 “别点了，受不了了“

          <script>
              function say(){
                console.log("别点了，受不了了！");
              }
              window.addEventListener("click", say ，false);
          </script>

二、上面我们已经知道如何添加监听，下面看一个例子，然后分析事件的流程：

事件流程的简单描述：

当我们给一个元素添加监听的时候，例如点击事件；

首先这个事件进入的是捕获阶段，也就是从外层向内层探索，例如下面的三个div嵌套的例子，

先找到到一个div，然后查看有没有绑定的事件，如果有，那么就执行相应的处理函数，如果

没有相应的事件或者事件执行完成，那么继续向里面的第二个div探索，如果第二个div有绑定

的事件，那么执行，如果没有，或者事件执行完成，继续向第三个div探索；

目标阶段，假设我们点击的是第三个div，那么到达这个div然后执行相应的处理就是我们本来

应该做的事情，也就是我们的目标；

冒泡阶段，假设我们的目标阶段执行完成，那么从第三个div依次到达第一个div，就是冒泡阶段，

这个阶段, 所做的事情就是和捕获阶段相反的，如图所示；

当然了，默认情况下，我们嵌套的三个div执行的是冒泡事件，当然了，我们也可以设置是表现为

捕获行为还是冒泡行为，下面通过代码实例来说明；

默认情况下是冒泡行为，我们先来看冒泡：

我们定义三个嵌套的div，然后分别给每个div设置 click 监听，分别弹出不同的内容；

效果图：

代码实现：

<!DOCTYPE html> 
<html> 
    <head> 
         <meta charset="utf-8"> 
         <meta name="newbean"/> 
         <title> 事件捕获和事件冒泡 </title> 
        <style type="text/css">
          #a{width:400px; height:400px; background-color:#ccc; padding:50px;}
          #b{width:200px; height:200px; background-color:pink; padding:50px;}
          #c{width:80px; height:80px; background-color:greenyellow;padding:50px;}
        </style>
    </head> 
<body> 
       <div id="a">我是第一个
         <div id="b">我是第二个
           <div id="c">
               我是第三个
           </div>
         </div>
       </div>
      <script> 
          var a=document.getElementById("a");
          var b=document.getElementById("b");
          var c=document.getElementById("c");
          a.addEventListener("click",function(){
            alert("我是第一个");
          });
          b.addEventListener("click",function(){
            alert("我是第二个");
          });
          c.addEventListener("click",function(){
            alert("我是第三个");
          }); 
      </script>
</body> 
</html>

结果：当我们点击第一个div时，弹出 “ 我是第一个 ”；

当我们点击第二个div时，先弹出“我是第二个”，再弹出“我是第一个”；

当我们点击第三个div时，先弹出 “我是第三个”，再弹出我是“第二个”，最后弹出“我是第一个”；

这个就是典型的时间冒泡；

我们再来看看捕获：

代码：

<!DOCTYPE html> 
<html> 
    <head> 
         <meta charset="utf-8"> 
         <meta name="newbean"/> 
         <title> 事件捕获和事件冒泡 </title> 
        <style type="text/css">
          #a{width:400px; height:400px; background-color:#ccc; padding:50px;}
          #b{width:200px; height:200px; background-color:pink; padding:50px;}
          #c{width:80px; height:80px; background-color:greenyellow;padding:50px;}
        </style>
    </head> 
<body> 
       <div id="a">我是第一个
         <div id="b">我是第二个
           <div id="c">
               我是第三个
           </div>
         </div>
       </div>
      <script> 
          var a=document.getElementById("a");
          var b=document.getElementById("b");
          var c=document.getElementById("c");
          a.addEventListener("click",function(){
            alert("我是第一个");
          },true);
          b.addEventListener("click",function(){
            alert("我是第二个");
          },true);
          c.addEventListener("click",function(){
            alert("我是第三个");
          },true); 
      </script>
</body> 
</html>