事件流是描述从页面中接收事件的顺序，也就是事件发生时会在元素节点之间按照特定的顺序来传播
目录
一.事件流三阶段
捕获阶段-->当前目标阶段-->冒泡阶段
这也就是我们执行事件时JS的底层操作，但是JS中只能执行捕获或冒泡其中一个阶段
比如我们使用传统方式进行事件捕获：
element.onclick = function(){}
//只能捕获到冒泡阶段或者使用attachEvent来捕获事件：
element.attachEvent('onclick',function(){})
//只能捕获到冒泡阶段再者就是使用addEvenetListener来捕获事件：
element.addEventListener('click',function(){},true/false)当第三个参数为true时，表示在事件捕获阶段调用事件处理程序
当第三个参数为false时，表示在事件冒泡阶段调用事件处理程序（默认值）
这就是我们使用addEventListener的原因，它不仅方便实用可多次在同一元素同一事件中执行多次程序，还可以自定义捕获阶段
当然，在实际的开发中很少用到事件捕获 ，主要使用冒泡（onblur、onfocus，onmouseleave等等这些事件是没有冒泡的，需要我们在开发时注意）
二.案例事件——体验事件流
当我们有一个大盒子包着一个小盒子，给大盒子，小盒子以及文档都注册了点击事件，那么当我们点击了小盒子，如果第三个参数为false（冒泡），那么会返回怎么样的顺序
<!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>Document</title>
<style>
header{
width: 300px;
height: 300px;
background-color: aquamarine;
}
div{
width: 150px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<header>
<div></div>
</header>
</body>
<script>
const div = document.querySelector('div')
const header = document.querySelector('header')
div.addEventListener('click',()=>{
console.log('1')
},false)
header.addEventListener('click',()=>{
console.log('2')
},false)
document.addEventListener('click',()=>{
console.log('document')
},false)
</script>
</html>
如果第三个参数为true（捕获），那么会返回怎么样的顺序
<!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>Document</title>
<style>
header{
width: 300px;
height: 300px;
background-color: aquamarine;
}
div{
width: 150px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<header>
<div></div>
</header>
</body>
<script>
const div = document.querySelector('div')
const header = document.querySelector('header')
div.addEventListener('click',()=>{
console.log('1')
},true)
header.addEventListener('click',()=>{
console.log('2')
},true)
document.addEventListener('click',()=>{
console.log('document')
},true)
</script>
</html>
