本文深入解析JavaScript中的事件冒泡与事件捕获机制，详细阐述事件执行的三个阶段：捕获、目标及冒泡。通过对比不同触发顺序，说明如何利用事件冒泡实现高效的事件委托，并介绍stopPropagation()等方法在IE8等旧版浏览器中的兼容性与具体应用，帮助开发者理解并控制DOM事件流。
01-事件冒泡
1.1-事件冒泡介绍
本小节知识点：介绍什么是事件冒泡
- 事件冒泡是指当某个元素的事件被触发时，该事件会沿着DOM树向上传播，依次触发其所有父级元素上绑定的同名事件。
传播路径通常为：目标元素 -> 父元素 -> body -> html -> document -> window。
事件冒泡机制一直存在，只是过去开发者较少在父级元素上绑定相同类型的事件，因此这一现象并不常被注意到。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件冒泡</title>
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
}
.son {
position: absolute;
left: 400px;
top: 300px;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!-- 冒泡: bubble -->
<div class="parent">
<div class="son"></div>
</div>
<script>
// 证明冒泡: 给父子添加同类型事件即可
const parent = document.querySelector('.parent')
const son = parent.firstElementChild
// 给父子绑定点击事件
parent.onclick = function () {
console.log('parent')
}
// 点击parent元素： 输出parent， 点击son元素： 也输出parent
// 1. 事件是所有元素都有的： 给不给事件， 都有
// 2. 点击son触发了parent的点击事件： 事件冒泡发生
// 所有元素都有事件， 包括顶级对象window
window.onclick = function () {
console.log('window')
}
// 事件链条： 目标元素-》上级-》上级-》body-》html-》document-》window
// 事件冒泡： 大部分的时候没用（还有坏处）
</script>
</body>
</html>
1.2-事件冒泡利用（事件委托）
本小节知识点：介绍事件冒泡的好处
事件冒泡的一个主要优势在于事件委托。当需要为父元素下的多个子元素添加相同的事件处理逻辑时，只需在父元素上绑定一次事件即可。
通过获取事件对象中的e.target属性，可以准确判断具体是哪个子元素触发了该事件，从而执行相应的逻辑。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件冒泡 - 应用 - 事件委托</title>
<style>
li {
margin: 20px 0;
}
</style>
</head>
<body>
<ul>
<li>百里守约1</li>
<li>百里守约2</li>
<li>百里守约3</li>
</ul>
<script>
// 需求: 给所有li增加鼠标的移入移出事件: 变色即可
// document.querySelectorAll('li').forEach(function (li) {
// li.onmouseover = function () {
// this.style.backgroundColor = 'red'
// }
// li.onmouseout = function () {
// this.style.backgroundColor = ''
// }
// })
// 1. 代码的执行效率偏低: 需要给所有的li,一个一个的绑定事件
// 2. 可扩展性弱: 新增一个li,将会无效
// innerHTML: 所有都无效
// document.querySelector('ul').innerHTML += '<li>innerHTML的li</li>'
// 逻辑: 取出ul中的所有li(结构,不包含事件), 再放进去(字符串形式): 所有的事件全部丢失
// document.createElement() + appendChild(): 新增的无效
// let li = document.createElement('li')
// li.innerHTML = 'creatElement创建的li'
// document.querySelector('ul').appendChild(li)
// 事件委托: 将子元素该绑定的事件(效果代码) 绑定到父元素身上
document.querySelector('ul').onmouseover = function (e) {
// 事件对象中: e.target 是触发事件的原始目标(最上面的孩子)
console.log(e.target)
// 如何区分目标元素是li还是ul呢? 节点: 节点三要素
// nodeType: li和ul都是元素, 1
// nodeValue: li和元素都是元素, null
// nodeName: 是元素标签名字的大写: LI UL
console.log(e.target.nodeName)
if (e.target.nodeName === 'LI') {
// 是目标元素
e.target.style.backgroundColor = 'red'
}
}
document.querySelector('ul').onmouseout = function (e) {
if (e.target.nodeName === 'LI') {
// 是目标元素
e.target.style.backgroundColor = ''
}
}
// 最大的优点: 事件绑定一次(性能极大提升)
// 次要优点: 不论是innerHTMl的修改还是createElement的创建: 所有的li都有效
// document.querySelector('ul').innerHTML += '<li>innerHTML的li</li>'
// 正是因为有了事件委托: 以后不用再使用创建元素,直接使用innerHTML方便太多
// let li = document.createElement('li')
// li.innerHTML = 'creatElement创建的li'
// document.querySelector('ul').appendChild(li)
// 事件委托: 是事件冒泡唯一的价值(挺有用)
</script>
</body>
</html>
1.3-事件冒泡影响 与 阻止事件冒泡
- 本小节知识点：介绍事件冒泡的影响
事件冒泡可能导致需求冲突。例如，实现一个功能：点击链接弹出登录窗口，点击body空白区域则关闭登录窗口。此时，点击链接触发的事件会冒泡到body，导致登录窗口刚弹出就立即消失。
解决方案：阻止事件冒泡（下一小节知识点）
- 本小节知识点：阻止事件冒泡
阻止事件冒泡的意思是，让同名事件不再向父元素传播（触发）。
* 说人话：点击一个元素只会触发当前元素的事件，不会触发父元素的同名事件
语法：使用事件对象的stopPropagation()方法，但IE8及更早版本不支持此方法。
兼容旧版IE（IE8之前）的方法：设置事件对象的cancelBubble属性为true。
注意：若要阻止事件冒泡，必须在触发事件的函数中接收并处理事件对象。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件冒泡 - 影响 - 阻止事件冒泡</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
display: block;
width: 200px;
margin: 20px auto;
}
.form {
position: relative;
width: 400px;
height: 200px;
margin: 0 auto;
text-align: center;
border: 1px solid #ccc;
display: none;
}
.form span {
display: block;
position: absolute;
right: -25px;
top: -25px;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border: 1px solid #ccc;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<a href="javascript:;" rel="external nofollow" >点我显示登录框</a>
<div class="form">
<span>X</span>
用户名: <input type="text" name="username"><br>
密码: <input type="password" name="password"><br>
<button>登录</button>
</div>
<script>
// 事件冒泡: 子元素事件触发, 导致父元素相同事件被触发
// 需求: 点击 链接 显示登录框, 点击任何空白地方, 都要隐藏登录框
const a = document.querySelector('a')
const form = document.querySelector('.form')
const x = form.firstElementChild
// 阻止冒泡: 阻止事件的传递: 事件对象e.stopPropagation()
// 子元素如果不希望父元素触发子元素相同的事件: 在子元素的事件中,阻止传递
// 1. 给a做点击事件: 显示div.form
a.onclick = function (e) {
console.log('a')
form.style.display = 'block'
console.log(e)
// 阻止传递: 点击事件, 到a这里结束
e.stopPropagation()
}
// 2. 点击空白隐藏div.form: 简单: 给document || window做点击事件
document.onclick = function () {
console.log('document')
form.style.display = ''
}
// 3. 为了安全: 让整个formdiv都可以点击, 不会传递
form.onclick = function (e) {
e.stopPropagation()
}
// 4. 点击关闭
x.onclick = function () {
form.style.display = ''
}
// 总结
// 实际开发中: 可能会出现父子出现相同类型的事件, 如果效果相反(a要显示div,document要隐藏div),一般会用到阻止事件传递: e.stopPropagation()
</script>
</body>
</html>
02-事件捕获
1.1-事件捕获介绍
本小节知识点：事件捕获
- 1. 事件冒泡：从触发事件的元素开始，一级一级向上查找父元素并触发同名事件，如果存在则触发。
- 2. 事件捕获：从最顶级的父元素（如window）开始，一级一级向下查找子元素并触发同名事件，直到到达触发事件的元素为止。
事件捕获与事件冒泡的触发顺序完全相反。
- 3. 事件捕获只能通过addEventListener方法添加，并且第三个参数设置为true时才生效。
其他情况均属于冒泡（包括非通过addEventListener添加的事件，或addEventListener参数为false的情况）。
- 4. 事件对象的stopPropagation()方法不仅可以阻止冒泡，也可以阻止捕获阶段的传播。
- 5. IE8及以前版本不支持事件捕获机制。
1.2-事件三个阶段
本小节知识点：介绍事件的三个阶段
- 1. 事件一共有三个阶段：事件的执行顺序。
1–捕获阶段：事件从最外层向目标元素传播。\n\n2–目标阶段：事件到达目标元素。\n\n3–冒泡阶段：事件从目标元素向最外层传播。
- 2. 通过事件对象的eventPhase属性，可以获取当前触发事件时处于哪个阶段。
- 3. 执行流程为：先从最顶级元素开始向下捕获，到达目标元素时进入目标阶段，随后在目标元素处触发冒泡，再一级一级向上冒泡。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件捕获</title>
</head>
<body>
<div class="box">我是小马哥</div>
<script>
// on事件: 全部都是冒泡事件
window.onclick = function () {
console.log('window的冒泡事件')
}
document.onclick = function () {
console.log('document的冒泡事件')
}
const box = document.querySelector('.box')
box.onclick = function () {
console.log('box的冒泡事件')
}
// 捕获事件:只有一种方式 addEventListener('事件类型',回调函数,true)
window.addEventListener('click', function () {
// console.log('window的捕获事件')
}, true)
document.addEventListener('click', function () {
console.log('document的捕获事件')
}, true)
// 事件捕获的唯一价值: 给事件目标做准备
// 事件流: 先捕获 后目标 再冒泡
// 目标阶段: 不区分捕获还是冒泡(哪个代码在前面,哪个先执行)
// 最新的谷歌: 先捕获后冒泡
// IE是按顺序(目标阶段)
// box前面已经有点击冒泡
box.addEventListener('click', function () {
console.log('box的捕获事件')
}, true)
// e.stopPropagation() 组织事件传递： 如果在捕获阶段阻止: 导致js出bug
window.addEventListener('click', function (e) {
e.stopPropagation()
}, true)
</script>
</body>
</html>```
到此这篇关于浅析js中事件冒泡与事件捕获的文章就介绍到这了,更多相关js事件冒泡与事件捕获内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！