JavaScript事件捕获与冒泡机制及阻止冒泡详解

作者：竹影时间：2026-10-24 20:32:07浏览：186

本文详解JavaScript中事件冒泡与捕获两种事件流模型，通过嵌套元素示例展示触发顺序。重点介绍使用event.stopPropagation()、cancelBubble及return false等方法阻止事件冒泡的操作，并说明各方法在不同浏览器环境下的兼容性与行为差异。

一、事件处理模型

事件冒泡与事件捕获是前端开发中处理页面事件流的两个核心概念，分别由微软和网景公司提出，旨在解决页面中事件发生的顺序问题。


<div id="d1">
        <div id="d2">
            <div id="d3"></div>
        </div>
</div>

当页面中存在具有嵌套关系的三个div元素，且为这三个元素注册了相同类型的事件时，我们需要明确它们的触发顺序。

1、事件冒泡

微软提出的事件冒泡模型规定，在结构上（非视觉上）存在嵌套关系的元素，会具备冒泡特性。即当同一事件发生时，事件会从子元素向父元素传播，方向为自底向上。

基于上述嵌套示例，若采用冒泡机制，事件的触发顺序应为：d3 -> d2 -> d1。接下来我们将通过代码验证这一结论。

（1）给三个div元素绑定事件


//1.获取元素
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、绑定事件
d1.onclick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(){
      console.log(this.id)
   }

（2）运行结果：

单击红色区域:

一、事件处理模型

单击紫色区域：

一、事件处理模型

单击绿色区域：

一、事件处理模型

以上即为事件冒泡的执行过程。

2、事件捕获

与冒泡相反，事件捕获机制允许在结构上嵌套的元素从父元素向子元素（即事件源元素）传递事件，方向为自顶向下。需要注意的是，IE浏览器早期版本不支持捕获事件。

针对前述示例，若采用捕获机制，触发顺序应为：d1 -> d2 -> d3。下面进行验证。

（1）给三个div元素绑定事件


//1.获取元素
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、绑定事件
d1.onclick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(){
      console.log(this.id)
   }

（2）运行结果：

单击红色区域：

一、事件处理模型

单击紫色区域：

一、事件处理模型

单击绿色区域：

一、事件处理模型

事件捕获get!!!

注意：

触发顺序：先捕获，后冒泡
focus,blur,change,submit,reset,select等事件不冒泡

二、阻止事件冒泡

（1）w3c标准 event.stopPropagation();但ie9以下版本不支持


//1.获取元素
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、绑定事件
d1.onclick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(e){
      e.stopPropagation();
      console.log(this.id)
   }

会发现单击绿色区域时，没有依次触发外部的事件，事件冒泡被阻止：

一、事件处理模型

（2）ie独有：event.cancelBubble = true;


//1.获取元素
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、绑定事件
d1.onclick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(e){
      e.cancelBubble = true;
      console.log(this.id)
   }

结果同（1）。

（3）合并取消：return false

在javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注本站的更多内容!

作者最新文章

JS怎么使用classList添加、删除和切换class

2026-11-05 17:26:02

网页开发三者分工：HTML结构、CSS样式与JavaScript交互怎么协作

2026-11-05 12:51:22

JS解析URL参数时怎么处理中文乱码和特殊字符

2026-11-05 12:47:23

js-cookie 存储 JSON 对象：自动序列化与反序列化技巧

2026-11-05 12:36:26

marked.js 快速上手：安装与基础 Markdown 转 HTML 示例

2026-11-05 09:32:53