js中事件冒泡，事件捕获详解
程序员文章站
2022-10-23 21:09:45
一、事件流 事件是js与HTML交互的基础，事件流描述的是页面接受事件的顺序，而事件流又分为三个阶段：捕获阶段、目标阶段和冒泡阶段。 如果单纯的事件处理，事件捕获和事件冒泡二选一即可，导致两者并存的原因是当年微软和网景的浏览器大战，微软提出了事件冒泡，而网景提出了事件捕获。 1、事件冒泡 事件开始由 ......
一、事件流
事件是js与html交互的基础，事件流描述的是页面接受事件的顺序，而事件流又分为三个阶段：捕获阶段、目标阶段和冒泡阶段。
如果单纯的事件处理，事件捕获和事件冒泡二选一即可，导致两者并存的原因是当年微软和网景的浏览器大战，微软提出了事件冒泡，而网景提出了事件捕获。
1、事件冒泡
事件开始由最深层的元素接收，然后逐级向上传播
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
#div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div"></div>
<script>
let div = document.getelementbyid('div');
div.onclick = function () {
console.log('div');
};
document.body.onclick = function () {
console.log('body')
};
</script>
</body>
</html>
当点击div标签的时候，先打印出div，然后再打印出body。因为div先接收到点击事件，然后再向它的父元素body传播，再到html，最后到document。
ie，chrome，firefox，opera，safari五大浏览器都支持事件冒泡。
2、事件捕获
事件开始由最外层的document捕获，然后依次向内传播，直至最深层的元素
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
#div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div"></div>
<script>
let div = document.getelementbyid('div');
div.addeventlistener('click', function () {
console.log('div');
}, true);
document.body.addeventlistener('click', function () {
console.log('body')
}, true);
</script>
</body>
</html>
当点击div标签的时候，最先打印body，然后再打印出div。因为addeventlistener函数的第三个参数为true时，函数处理捕获事件，document先捕获点击事件，依次传播到html—body—div。
ie9，chrome，firefox，opera，safari五大浏览器都支持事件捕获，ie8及以下版本不支持事件捕获。
上一篇： 家里的笑事儿快笑死人啦!