事件是在编程时系统内发生的动作或者发生的事情
事件监听（绑定）
事件监听就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件
元素对象.addEventListener('事件类型',要执行的函数)事件监听三要素：
1）事件源：哪个dom元素被事件触发了，要获取dom元素
2）事件类型：用什么方式触发
3）事件调用的函数：要做什么事
事件监听版本
DOM L0：传统on注册
事件源.on事件=function(){}1）只有冒泡没有捕获
2）同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
3）都是冒泡阶段执行的
DOM L2：事件监听注册
事件源.addEventListener(事件类型,事件处理函数,是否使用捕获)1）既可以做冒泡，也可以做捕获
2）后面注册的事件不会覆盖前面注册的事件（同一个事件）
3）可以通过第三个参数去确定是在冒泡或者捕获阶段执行
区别：
on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
事件类型
鼠标经过事件的区别：
1）mouseover和mouseout会有冒泡效果
2）mouseenter和mouseleavet没有冒泡效果（推荐）
事件对象
事件对象也是个对象，这个对象里有事件触发时的相关信息；例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
使用场景：
1）可以判断用户按下哪个键，比如按下回车键可以发布新闻
2）可以判断鼠标点击了哪个元素，从而做相应的操作
获取事件对象
事件对象常用属性
参考资料：MDN Web Docs
事件流
事件流指的是事件完整执行过程中的流动路径
说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
简单来说：捕获阶段是从父到子；冒泡阶段是从子到父
实际工作都是使用事件冒泡为主
事件捕获
从DOM的根元素开始去执行对应的事件（从外到里）
事件捕获需要写对应代码才能看到效果
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)说明：
1）addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
2）若传入false代表冒泡阶段触发，默认是false
3）若是用L0事件监听，则只有冒泡阶段，没有捕获
事件冒泡
当一个元素的事件被触发时，同样的事将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
1）简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
2）事件冒泡是默认存在的
3）L2事件监听第三个参数是false，或者默认都是冒泡
阻止冒泡
阻止事件冒泡
事件对象.stopPropagation()//阻止事件冒泡注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
阻止默认行为
我们某些情况下需要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转
e.preventDefault()//链接的跳转，表单域跳转解绑事件
on事件方式
直接使用null覆盖偶就可以实现事件的解绑
addEventListener方式
必须使用：removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡阶段])
注意：匿名函数无法被解绑
事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧
优点：减少注册次数，可以提高程序性能
原理：事件委托其实是利用事件冒泡的特点；事件委托给了父元素
给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
实现：事件对象.target.tagName可以获得真正触发事件的元素（大写）
其他事件
页面加载事件
1.加载外部资源（如图片、外联CSS和Javascript等）加载完毕时触发的事件
事件名：load
监听页面所有资源加载完毕：给window添加load事件
//页面记载事件
window.addEventListener('load',function(){//执行的操作
})注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
2.当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载
事件名：DOMContentLoaded
监听页面DOM加载完毕：给document添加DOMContentLoaded事件
document.addEventListener('DOMContentLoaded',function(){//执行的操作
})页面滚动事件
滚动条在滚动的时候持续触发的事件
事件名：scroll
1）监听整个页面滚动：给window或document添加scroll事件
//页面滚动事件
window.addEventListener('scroll',function(){//执行的操作
})2）监听某个元素的内部滚动直接给某个元素加即可
scrollLeft和scrollTop（属性）
1）获取被卷去的大小
2）获取元素内容往左、往上滚出去看不到的距离
3）这两个值是可读写的，得到的是数值型不带单位的数据
获取body元素：document.body
获取html元素：document.documentElement（HTML文档返回对象为HTML元素）
监测页面滚动应该监测最大的元素就是html
尽量在scroll事件里面获取被卷去的距离
div.addEventListener('scroll',function(){console.log(this.scrollTop)
})scrollTop()
可把内容滚动到指定的坐标
元素.scrollTo(x,y)页面尺寸事件
会在窗口尺寸改变的时候触发事件（resize）：
window.addEventListener('resize',function(){//执行的代码
})获取宽高：
获取元素的可见部分宽高（不包含边框，margin，滚动条等）
clientWidth和clientHeight
window.addEventListener('resize',function(){let w=document.documentElement.clientWidthconsole.log(w)
})
