宽屏
1. 事件流和两个阶段说明
事件流指的是事件完整执行过程中的流动路径
说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父
实际工作都是使用事件冒泡为主
2. 事件捕获
事件捕获概念：
从DOM的根元素开始去执行对应的事件(从外到里)
事件捕获需要写对应代码才能看到效果
代码：
DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
说明：
addEventListener第三个参数传入 true 代表是捕获阶段触发 (很少使用)
若传入false代表冒泡阶段触发，默认就是false
若是用 L0 事件监听，则只有冒泡阶段，没有捕获
3. 事件冒泡
事件冒泡概念：
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
事件冒泡是默认存在的
L2事件监听第三个参数是 false，或者默认都是冒泡
4. 阻止冒泡
问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
前提：阻止事件冒泡需要拿到事件对象
语法:
事件对象.stopPropagation()
注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效。
5. 解绑事件
on事件方式，直接使用null覆盖偶就可以实现事件的解绑
语法：
// 绑定
btn.onclick = function() {
alert('按钮被点击了！')
}
// 解除
btn.onclick = nulladdEventListener方式，必须使用：
removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])
例如:
function fn() {
alert('按钮被点击了！')
}
// 绑定
btn.addEventListener('click', fn)
// 解绑
btn.removeEventListener('click', fn)注意：匿名函数无法被解绑
6. 鼠标经过事件的区别
鼠标经过事件
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果(推荐)
7. 两种注册事件的区别
传统on注册 (L0)
同一个对象，后面注册的事件会覆盖前面注册(同一个事件)
直接使用 null 覆盖偶就可以实现事件的解绑
都是冒泡阶段执行的
事件监听注册 (L2)
语法：addEventListener(事件类型, 事件处理函数, 是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
匿名函数无法被解绑
8. 事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧
优点：减少注册次数，可以提高程序性能
原理：事件委托其实是利用事件冒泡的特点
给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
实现：事件对象.target.tagName 可以获得真正触发事件的元素
例如：
<ul>
<li>数据1</li>
<li>数据2</li>
<li>数据3</li>
<li>数据4</li>
<li>数据5</li>
<li>数据6</li>
<p>我不需要变色</p>
</ul>
<script>
const ul = document.querySelector('ul')
ul.addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
e.target.style.color = 'red'
}
})
</script>9. 阻止默认行为
我们某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转
语法：
e.preventDefault()
例如：
阻止表单提交
<form action="https:www.liqinglin0314.com">
<button type="commit">提交</button>
</form>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', function(e) {
e.preventDefault()
})
</script>阻止a标签跳转
<a href="https:www.liqinglin0314.com">跳转</a>
<script>
const a = document.querySelector('a')
a.addEventListener('click', function(e) {
e.preventDefault()
})
</script>