事件流
2019-12-30 本文已影响0人
再见噜噜班
事件，就是文档或者浏览器与用户的交互瞬间。简单地说，就是当用户操作时，比如点击按钮，浏览器做出相应的回应。所谓事件流，就是页面中事件接收的顺序。目前，主要有两种事件流，事件冒泡流和事件捕获流。
<!DOCTYPE html>
<html lang="en" onclick="console.log(3)">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body onclick="console.log(2)">
<div id='box' onclick="console.log(1)">click</div>
</body>
</html>
事件冒泡
事件冒泡的意思是事件从最具体的元素开始接收，然后逐级向上传播到不太具体的元素(或者是文档)。 例子中，如果你单击了id为box的div，其事件的传播轨迹是div>body>html>document
事件冒泡.jpg
事件捕获
事件捕获的意思是事件从最不具体的元素（或者文档）就开始接收，然后逐级向里层具体的元素传播。同样，如果你单击了id为box的div，其事件的传播轨迹是document>html>body>div
事件捕获.jpg
尽管“DOM2 级事件”规范要求事件应该从 document 对象开始传播，但大部分浏览器都是从 window 对象开始捕获事件的
事件流
"DOM2级事件"规定事件流分为三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
事件流.jpg
为了更加清晰直观地理解事件，下面通过具体案例来讲解：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.outer{
width: 400px;
height: 200px;
background: cadetblue;
}
.middle{
width: 300px;
height: 150px;
background: indianred;
}
.inner{
width:200px;
height: 100px;
background: lawngreen;
}
</style>
</head>
<body>
<div class='outer'>外层div
<div class='middle'>中层div
<div class='inner'>里层div</div>
</div>
</div>
</body>
</html>
//addEventListener最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。默认为false
let capture = true
window.addEventListener('click',()=>{
console.log('window')
},capture)
document.addEventListener('click',()=>{
console.log('document')
},capture)
let outer = document.getElementsByClassName('outer')
outer[0].addEventListener('click',()=>{
console.log('outer')
},capture)
let middle = document.getElementsByClassName('middle')
middle[0].addEventListener('click',()=>{
console.log('middle')
},capture)
let inner = document.getElementsByClassName('inner')
inner[0].addEventListener('click',()=>{
console.log('inner')
},capture)
事件案例.jpg
addEventListener最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。默认为false。当
capture为true时，采用的是捕获事件流,即事件从外向里传播，当我们点击最里层的div，控制台输出如图所示：
事件捕获案例.jpg
当
capture为false时，采用的是冒泡事件流,即事件从里向外传播，当我们点击最里层的div，控制台输出如图所示：
事件冒泡案例.jpg
由于老版本的浏览器不支持，因此很少有人使用事件捕获。我们也建议读者放心地使用事件冒泡，在有特殊需要时再使用事件捕获。
