事件冒泡和捕获

最新推荐文章于 2025-08-22 09:26:38 发布

原创最新推荐文章于 2025-08-22 09:26:38 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#冒泡捕获

本文详细介绍了事件捕获和事件冒泡的概念及其在网页交互中的应用。通过实例展示了事件处理程序的触发顺序，并解释了如何阻止事件的默认行为。

之前遇到过冒泡自己没太注意，直到今天在面经中看到，这才意识到是时候该好好研究冒泡和捕获了……

我们先来看看事件捕获究竟是什么操作？

事件捕获

事件捕获：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

假设一个元素div，它有一个下级元素p。

<div>
　　<p>元素</p>
</div>

这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？

事件捕获

当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。
再看一个事件捕获的例子

<style>
  #parent{
    width: 100px;
    height: 100px;
    background: red;
    }
</style>
<body>
  <div id="parent"></div>
<script type="text/javascript">
   var div=document.getElementById("parent")；
   //事件捕获，加了第三个参数
   div.addEventListener("click",function(event){
        alert("div");
   },true);
   document.body.addEventListener("click",function(event){
        alert("body")
   },true);
 </script>
 </body>

在这个例子中按照捕获的套路，从上到下先输出body，再输出div。

事件冒泡

事件冒泡：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

在上面的栗子中，当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。
我们还是看看栗子吧！

 div.onclick=function(event){
      alert("div");
 };
document.body.onclick=function(event){
      alert("body");
};

我们先来猜猜它是怎么输出？
先输出div，再输出body，没错滴。

绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。

IE只支持事件冒泡，其他的浏览器两种都支持。

DOM事件流

DOM事件流包括三个阶段。
1.事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段

DOM事件流图

放张图片帮助大家理解。

阻止事件冒泡

阻止事件的默认行为

事件的默认行为是指浏览器在事件传递和处理完成后自动执行的与该事件关联的默认动作。例如，单击一个超链接的默认行为是访问其定义的的URL。

在IE中，可以通过设置event对象的returnValue属性为false来阻止事件的默认行为；

在其他浏览器中，可以通过设置event对象的
preventDefault（）方法来实现。

function stopDefault（e）{
if（e&&e.preventDefault){//判断浏览器是非IE浏览器
e.preventDefault();
//非IE浏览器下使用preventDefault方法
}else{
//IE浏览器下令事件（window.event）的returnValue属性为false；
window.event.returnValue=false;
}
return false;
}