一、事件流和它的两个阶段
1.事件流：是事件完整执行过程中的流动路径
2.说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
（1）捕获：从父到子
（2）冒泡：从子到父
实际开发都是使用事件冒泡为主
二、事件捕获
了解事件捕获执行过程
1.事件捕获概念：
从DOM的根元素开始去执行对应的事件（从外到里）
2.语法：
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
3.说明：
（1）addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
（2）若传入false代表冒泡阶段触发，默认就是false
(3)若是传统on事件监听，则只有冒泡阶段，没有捕获
<style>
.father{
width: 200px;
height: 200px;
background-color: pink;
}
.son{
width: 20px;
height: 20px;
background-color: purple;
}
</style>
<div class="father">
<div class="son"></div>
</div>
//第一种
const fa = document.querySelector('.father')
const son = document.querySelector('.son')
// 事件捕获
document.addEventListener('click',function(){
alert('我是爷爷')
},true)
fa.addEventListener('click',function(){
alert('我是爸爸')
},true)
son.addEventListener('click',function(){
alert('我是儿子')
},true)
//on
//第二种
<script>
const fa = document.querySelector('.father')
const son = document.querySelector('.son')
// 事件捕获
fa.onclick = function(){
alert('我是爸爸')
}
son.onclick = function(){
alert('我是儿子')
}
</script>
三、事件冒泡
1.概念：
当一个元素的事件触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。
2.简称：
当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
3.事件冒泡是默认存在的
4.事件监听注册第三个参数是false,或者默认都是冒泡
<div class="father">
<div class="son"></div>
</div>
//冒泡
const fa1 = document.querySelector('.father')
const son1 = document.querySelector('.son')
// 事件捕获
document.addEventListener('click',function(){
alert('我是爷爷')
})
fa1.addEventListener('click',function(){
alert('我是爸爸')
})
son1.addEventListener('click',function(){
alert('我是儿子')
})
四、阻止冒泡
1.问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
2.需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
3.前提：阻止事件冒泡需要拿到事件对象
4.语法：
事件对象.stopPropagation()
注意:此方法可以阻断事件流动传播，不光在冒泡阶段，捕获阶段也有效
//冒泡
const fa1 = document.querySelector('.father')
const son1 = document.querySelector('.son')
// 事件捕获
document.addEventListener('click',function(){
alert('我是爷爷')
})
fa1.addEventListener('click',function(){
alert('我是爸爸')
})
son1.addEventListener('click',function(e){
alert('我是儿子')
//阻止流动传播 事件对象.stopPropagation()
e.stopPropagation()
})
五、解绑事件
1.on事件方式，直接使用null覆盖就可以实现事件的解绑
语法：
<button>点击</button>
<script>
const btn = document.querySelector('button')
//第一种：
// 绑定事件
btn.onclick = function(){
alert('点击了')
}
//解绑事件
btn.onclick = null
</script>
2.addEventListener方式，必须使用：
removeEventListener(事件类型，事件处理函数，[获取捕获或者冒泡阶段])
第三个参数可省略
//第二种
function fn(){
alert('点击了')
}
//绑定事件
btn.addEventListener('click',fn)
//解绑事件
btn.removeEventListener('click',fn)
ps:匿名函数无法被解绑
六、鼠标经过事件的区别：
鼠标经过事件：
mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果（更常用）
