本文详解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的话则既阻止默认行为又防止对象冒泡。
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注本站的更多内容!