1. 认识事件
Web页面需要经常和用户之间进行交互，而交互的过程中我们可能想要捕捉这个交互的过程：
监听事件
- 事件监听方式一：在script中直接监听（很少使用）；
- 事件监听方式二：DOM属性，通过元素的on来监听事件；
- 事件监听方式三：通过EventTarget中的addEventListener来监听；
2. 常见的事件列表
-
鼠标事件：
- click —— 当鼠标点击一个元素时（触摸屏设备会在点击时生成）。
- mouseover / mouseout —— 当鼠标指针移入/离开一个元素时。
- mousedown / mouseup —— 当在元素上按下/释放鼠标按钮时。
- mousemove —— 当鼠标移动时。
-
键盘事件：
- keydown 和 keyup —— 当按下和松开一个按键时。
-
表单（form）元素事件：
- submit —— 当访问者提交了一个 <form> 时。
- focus —— 当访问者聚焦于一个元素时，例如聚焦于一个 <input>。
-
Document 事件：
- DOMContentLoaded —— 当 HTML 的加载和处理均完成，DOM 被完全构建完成时。
-
CSS 事件：
- transitionend —— 当一个 CSS 动画完成时。
3. 事件流
为什么会产生事件流呢？
当我们在浏览器上对着一个元素点击时，你点击的不仅仅是这个元素本身；
因为我们的HTML元素是存在父子元素叠加层级的；
事件冒泡和事件捕获
从最内层的元素向外依次传递的顺序，称之为事件冒泡（Event Bubble）;
是从外层到内层（body -> span），这种称之为事件捕获（Event Capture）
开发中通常会使用事件冒泡(默认)
// 监听捕获 第三个参数设置成true
El.addEventLinstener("event", fn, true)
4. 事件对象
比如事件的类型是什么，你点击的是哪一个元素，点击的位置是哪里等等相关的信息；
那么这些信息会被封装到一个Event对象中，这个对象由浏览器创建，称之为event对象；
获取这个event对象
event对象会在传入的事件处理（event handler）函数回调时，被系统传入；
我们可以在回调函数中拿到这个event对象；
对象的常见属性
- type：事件的类型；
- target：当前事件发生的元素；
- currentTarget：当前处理事件的元素；
- eventPhase：事件所处的阶段；
- offsetX、offsetY：事件发生在元素内的位置；
- clientX、clientY：事件发生在客户端内的位置；
- pageX、pageY：事件发生在客户端相对于document的位置；
- screenX、screenY：事件发生相对于屏幕的位置；
对象的常见方法
- preventDefault：取消事件的默认行为；
- stopPropagation：阻止事件的进一步传递（冒泡或者捕获都可以阻止）；
事件处理中的this
在函数中，我们也可以通过this来获取当前的发生元素：
这是因为在浏览器内部，调用event handler是绑定到当前的target上的
5. EventTarget类
所有的节点、元素都继承自EventTarget
EventTarget常见的方法：
- addEventListener：注册某个事件类型以及事件处理函数；
- removeEventListener：移除某个事件类型以及事件处理函数；
var btnEl = document.querySelector("button")
var foo = function () {
console.log("监听到按钮的点击")
}
btnEl.addEventListener("click", foo)
setTimeout(function () {
console.log("将事件监听移除掉")
btnEl.removeEventListener("click", foo)
}, 5000)
- dispatchEvent：派发某个事件类型到EventTarget上；
window.addEventListener("wsw", function () {
console.log("啦啦啦啦啦啦收到消息啦")
})
setTimeout(() => {
window.dispatchEvent(new Event("wsw"))
}, 5000);
6. 事件委托
因为当子元素被点击时，父元素可以通过冒泡可以监听到子元素的点击；
并且可以通过event.target获取到当前监听的元素；
