事件流描述的是从页面中接收的顺序。
事件发生时会在元素节点之间按照特定的是顺序传播,这个传播过程即DOM事件流。
比如给一个 div 注册了点击事件:
DOM事件分为3个阶段:
-
捕获阶段
-
当前目标阶段
-
冒泡阶段
-
事件冒泡:IE最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程。
-
事件捕获:网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到最具体的元素接收的过程。
注意:
- JS代码中只能执行捕获或者冒泡其中的一个阶段。
- onclick 和 attachEvent 只能得到冒泡阶段。
- addEventListener(type, listener[, useCapture]) 第三个参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是false(不写默认就是false),表示在事件冒泡阶段调用事件处理程序。
- 实际 很少用到事件捕获,更关注事件冒泡。
- 有些事件是没有冒泡的,比如:onblur、onfocus、onmouseenter、onmouseseleave
<!DOCTYPE html>
<html lang="en">
<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>
.father {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
.son {
position: absolute;
top: 50%;
margin-top: -75px;
left: 50%;
margin-left: -75px;
width: 150px;
height: 150px;
background-color: purple;
color: #fff;
line-height: 150px;
text-align: center;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
//捕获阶段 true 则document->html->body->father->son
/* var son = document.querySelector('.son');
son.addEventListener('click', function () {
alert('son');
}, true);
var father = document.querySelector('.father');
father.addEventListener('click', function () {
alert('father');
}, true); */
//冒泡阶段 false或者省略 则son->father->body->html->document
var son = document.querySelector('.son');
son.addEventListener('click', function () {
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function () {
alert('father');
}, false);
document.addEventListener('click', function () {
alert('document');
})
</script>
</body>
</html>