前言
学事件学的就是：啥是事件；事件绑定；事件绑定的区别；事件对象里面的东西：阻止默认行为；阻止冒泡传播；引发出来的事件传播机制；以及事件传播里面有两大非常容易混淆的事件有什么区别。这就是核心的理论知识，这些东西是很重要的，学事件就是学的这些东西
事件对象
当事件行为触发，浏览器会把绑定的方法执行，并且把全局下记录当前操作信息的“事件对象”传递给这个函数。
当前做了某些操作，不管在哪一个函数中，我们获取的事件对象是同一个，存储的是当前操作的信息，和函数没关系
let n;
document.body.onclick = function(ev){
console.log(n === ev); //=> true
}
box.onclick = function (ev){
n = ev;
}
鼠标事件对象：MouseEvent
//鼠标触发点距离当前窗口左上角的X/Y轴的坐标
clientX
clientY
//鼠标触发点距离body（页面首屏）左上角的X/Y轴的坐标
pageX
pageY
//存储的是冒泡阶段需要传播的路径（值是捕获阶段获取的）
path:[...]
//事件源（当前操作的元素）
srcElement/target
//事件类型
type
键盘事件对象：KeyboardEvent
//键盘按键的键盘码
which/keyCode
//记录是否在按键的时候，按下这些键（组合按键，属性值是布尔类型）
shiftKey/altKey/ctrlKey
//事件源（当前操作的元素）
srcElement/target
//事件类型
type
常规事件对象：Event
手指事件对象：TouchEvent
......
在Event原型上有一些方法：
//阻止事件的默认行为
preventDefault() / ev.returnValue = false
//阻止事件的冒泡传播
ev.stopPropagation() / ev.cancelBubble = true
document.onkeydown =function (ev){
let {
ctrlKey,
keyCode
}=ev;
//按CTRL+F禁止默认行为，我们期望它刷新页面
if(ctrlKey && keyCode ===70){
ev.preventDefault();
location.href = location.href;
}
}
document.oncontextmenu = function (ev){
//禁止右键菜单
//return false 也可以，也是阻止默认行为
ev.preventDefault();
}
事件传播机制
事件是具备传播机制的：
1.捕获 CAPTURING_PHASE: 1
2.目标 AT_TARGET: 2
3.冒泡 BUBBLING_PHASE: 3
当我们触发当前元素的某个事件行为的时候：
1.首先会从最外层window开始，一层层的按照结构向里层查找【捕获阶段：为冒泡阶段提供传播路径 => ev.path】
2.找到当前事件源，触发当前事件源的相关行为【目标阶段】
3.不仅当前事件源的相关行为触发，其所有祖先元素的相关事件行为都会被触发（在这个过程中，哪一个元素的事件行为绑定了方法，方法都会被触发执行，而且顺序是由里层向外层传播）【冒泡阶段】
大部分事件默认都会存在冒泡传播机制，但是少部分事件天生自己就阻止了冒泡传播
注意：
mouseenter/mouseleave
// 进入盒子 离开盒子，浏览器默认阻止了冒泡传播机制。
mouseover/mouseout //不是进入盒子里面，是鼠标悬浮在盒子上面，或者从盒子上面离开。是存在冒泡传播机制的。
所以在项目中尽量使用enter 和 leave ，不然很多坑，容易掉坑里
