一、事件流
1.事件流和两个阶段说明
事件流 指的是事件完整执行过程中的流动路径
说明：当触发事件时，会经历两个阶段：捕获阶段、冒泡阶段
捕获阶段时 从父到子 冒泡阶段是 从子到父
实际工作都是使用事件冒泡为主
2.事件捕获（简单了解）
概念： 从DOM的根元素开始去执行对应的事件（从外到里）
事件捕获需要写对应代码才能看到效果
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
- addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）
- 若传入false代表冒泡阶段触发，默认就是false
- 若是用L0事件监听，则只有冒泡阶段，没有捕获
3、事件冒泡
概念： 当一个元素的事件被触发时，同样的事件会在该元素的所有祖先元素中依次被触发，这一过程被称为事件冒泡
- 当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
- 事件冒泡是默认存在的
- L2事件监听第三个参数是false，或者默认都是冒泡
ps. L0 和 L2 见 第二天1.2事件监听版本
4、阻止冒泡
问题： 因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
需求： 若想把事件就限制在当前元素内，就需要阻止事件冒泡
语法：
事件对象.stopPropagation()
注意： 此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
阻止默认行为的发生，如：阻止 链接的跳转，表单域跳转
语法：
e.preventDefalt()
5.解绑事件
（1）on事件方式，直接使用null覆盖就可以实现事件的解绑
语法：
//绑定事件
btn.onclick = function(){
alert('点击了')
}
//解绑事件
btn.onclick = null
（2）addEventListener方式，必须使用： removeEventListener（事件类型， 事件处理函数， [获取捕获或者冒泡阶段]）
语法：
function fn(){
alert('点击了')
}
//绑定事件
btn.addEventListener('click', fn)
//解绑事件
brn.removeEventListener('click', fn)
注意：匿名函数无法被解绑
鼠标经过事件的区别
- mouseover 和 mouseout 会有冒泡效果
- mouseenter 和 mouseleave 没有冒泡效果（推荐）
两种注册事件的区别
（1）传统on注册（L0）
- 同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
- 直接俄使用null覆盖就可以实现事件的解绑
- 都是冒泡阶段执行的
（2）事件监听注册（L2）
- 语法：AddEventListener(事件类型，事件处理函数，是否使用捕获)
- 后面注册的事件不会覆盖前面注册的事件（同一个事件）
- 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
- 必须使用removeEventListener(事件类型，事件处理函数，获取捕获或者冒泡阶段)
- 匿名函数无法被解绑
二、事件委托
事件委托事利用事件流的特征解决一些开发需求的知识技巧
优点：减少注册次数，可以提高程序性能
原理： 事件委托其实是利用事件冒泡的特点
给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
实现： e(事件对象).target.tagName可以获得真正触发事件的元素
三、其他事件
1.页面加载事件
（1）load事件
加载外部资源（如图片，外联CSS和Js等）加载完毕时触发的事件
老代码喜欢把script写在head中，这时候直接找dom元素找不到
事件名：load
监听页面所有资源加载完毕：给window添加load事件
//页面加载事件
window.addEventListener('load', function () {
alert("页面加载完成")
})
注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
（2）DOMContentLoaded
当初始的HTML文档被完全加载和解析完成后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载
事件名： DOMContentLoaded
监听页面DOM加载完毕： 给document添加DOMContentLoaded事件
document.addEventListener('DOMContentLoaded',function(){
//执行的操作
})
2.页面滚动事件
滚动条在滚动的时候持续触发的事件
事件名： scroll
监听整个页面滚动：
//页面滚动事件
//页面滚动的是html标签
window.addEventListener('scroll',function(){
//页面的操作
//获取html标签的写法：document.documentElement
console.log(document.documentElement.scrollTop)
})
给window或document添加scroll事件
监听某个元素的内部滚动直接给某个元素加即可
（1）获取位置：scrollLeft和scrollTop
scrollLeft和scrollTop：
- 获取被卷去的大小
- 获取元素内容往左、往上滚出去看不到的距离
- 这两个值是可读写的
尽量在scroll事件里面获取被卷去的距离
//页面滚动
document.documentElement.scrollTop = 数值
（2）滚动到指定坐标：scrollTo()
语法： 元素.scrollTo(x, y)
3.页面尺寸事件
触发：在窗口尺寸改变的时候触发的事件：resize
获取元素宽高：clientWidth 和 clientHeight
获取元素的可见部分宽高(不包含边框，margin，滚动条等)
四、元素尺寸与位置
通过JS方式，得到 元素在页面中的位置
获取宽高：offsetWidth 和 offsetHeight
获取出来的是数值，方便计算
注意： 获取的是可视宽高，如果盒子是隐藏的，获取的结果是0
获取位置：offsetLeft 和 offsetTop
获取元素距离自己定位父级元素的左、上距离
注意： offsetLeft 和 offsetTop 是只读属性
