事件
事件流
事件冒泡
从最具体的元素（文档树中最深的节点）开始触发，然后上传播
事件捕获
从最不具体的节点最先接收到事件，最具体的节点最后收到事件
dom事件流
事件流分为三个阶段：事件捕获=》到达目标事件=》事件冒泡
事件的目标在捕获阶段捕获接收到事件，因为到达目标元素前就结束捕获了
事件处理程序
<style>
.dad {
background-color: aqua;
width: 200px;
height: 200px;
text-align: right;
}
.son {
background-color: olivedrab;
width: 100px;
height: 100px;
text-align: right;
}
</style>
<body>
<div class="dad">
爸
<div class="son">儿</div>
</div>
</body>
1》DOM0: on+事件名
如果使用的是普通函数，那么函数中的this指向目标元素（触发者）
如果是箭头函数，定义位置所在的作用域的this（函数作用域）是谁，this就指向谁
dad.onclick = () => {
console.log("老爸");
console.log(this); // 这里window
};
son.onclick = function () {
console.log("孩子");
console.log(this); // <div class="son">儿</div>
};
// dad.addEventListener("click", function () {
// console.log("我是你爸爸");
// console.log(this);
// });
// son.addEventListener("click", () => {
// console.log("我是你的乖乖");
// });
2》DOM2: addEventListener()和 removeEventListener()
接收三个参数：事件名、事件处理程序、一个布尔值（true为在捕获阶段调用事件处理程序，false在冒泡阶段调用事件处理程序）
第一个和第二个必传，带三个时可选参数；一般事件默认都是在冒泡阶段调用事件处理程序，布尔值默认为false
通过addEventListener()添加的事件处理程序只能使用removeEventListener()并传入添加时同样的参数才有效；如果想要使用removeEventListener移除事件执行程序，那么addEventListener不能使用匿名函数
function dadEvent() {
son.removeEventListener("click", sonEvent);
console.log("我是你爸爸");
}
const sonEvent = () => {
console.log("我是你的乖乖");
};
dad.addEventListener("click", dadEvent, true);
son.addEventListener("click", sonEvent);
点击儿子，结果只打印了 “我是你爸爸”,因为父元素的事件处理程序实在捕获阶段执行的，而在这是已经将子元素的点击的事件执行程序移除了
*onClick=func与addEventListener(“click”，func)的区比较
onClick一个事件只能添加一个事件处理程序，添加多个时后面的会覆盖前面的；而addEventListener一个事件可以多个事件处理程序
onClick通过等于null来移除；addEventListener通过removeEventListener移除
IE事件处理程序
使用DOM0时，this指向目标元素；在使用attachEvent() 时，事件处理程序实在全局作用域中运行的，所以this指向window
document.body.attachEvent("onClick", function () {
console.log(this === window); // true
});
同个dom同个事件，添加了多个事件处理程序时，会以添加他们的顺序反向触发;下面代码结果：2 1
const handle1 = () => {
console.log(1);
};
const handle2 = () => {
console.log(2);
};
document.body.attachEvent("onclick", handle1);
document.body.attachEvent("onclick", handle2);
使用detachEvent()来移除事件处理程序
document.body.detachEvent("onclick",handle2)
事件对象
target:事件目标（只读）
currentTarget:当前事件处理程序所在的元素（只读）
在事件处理程序内部（非箭头函数），this对象始终等于currentTarget的值
如果事件处理程序直接添加在了意图的目标，那么 this / currentTarget / target 的值是一样的
type:被触发的事件类型（只读）
stopPropagation()：取消后续的事件捕获或事件冒泡，如果a标签默认点击跳到对应的url
preventDeafault()：取消事件的默认行为
事件类型
用户界面事件
load:在window对象上，在整个页面（包括所有的外部资源，如图片、js文件、css文件）加载完成后触发；
? window/body/img都可以添加load事件
unload：在文档卸载完成后触发；一般是在从一个页面导航到另一个页面时触发，最常用于清理引用
resize:在window上触发，当浏览器窗口发生缩放、最大化、最小化都会触发
scroll：发生滚动触发
error：在window上当js报错触发
select：文本框，用户选择时触发
焦点事件
blur:元素失去焦点时触发
focus:元素获得焦点时触发
blur和focus都不支持冒泡
鼠标和滚轮事件
click:单机鼠标触发
dbclick：双击鼠标逐渐触发（通常是左键）
mouseenter：用户把鼠标光标从元素外部一道元素内部时触发一次
mouseleave：用户把鼠标光标从元素内部移到元素外部
mousemove：鼠标光标在元素上移动时触发
mouseout：鼠标移动到元素外部或元素的子元素内触发
mouseover：鼠标光标从元素外部移到元素内部时触发（元素内部或子元素内部）
mousedown：用户按下任意鼠标键时触发
mouseup：用户释放鼠标键时触发
mousewheel：鼠标滚轮滚动
mouseover/mouseout支持冒泡，mouseenter/mouseleave 不支持冒泡
点击事件对象
客户端坐标：event.clientX event.clientY 事件发生时光标在视口中的坐标
页面坐标：event.pageX event.pageY 事件发生时光标在页面中的坐标
屏幕坐标：event.screenX event.screenY 事件发生时光标在屏幕上的坐标
修饰键：Shift/Ctrl/Alt/Meta分别对应event.shiftKey/event.ctrlKey/event.altKey/event.metaKey
键盘与输入事件：
keydown: 用户 按下键盘上某个键 时触发，一直按着会一直触发
keypress: 用户 按下并产生字符 时触发，持续按着会重复触发
keyup: 用户释放按键 时触发
HTML5事件
contentmenu : 单击鼠标右键弹出上下文菜单时触发
beforeunload：在window上触发，页面即将从浏览器中卸载时触发
DOMContentLoad: 在dom树构建完成后触发，不用等其他资源加载完成，这就是与load的区别
readstatechange:模拟DOMContentLoad
pageshow和pagehide:往返缓存，Firefox和Opera开发事件必须添加到window上
hashchange:url#后面的部分发生变化时触发，必须添加给window
没有冒泡的事件
卸载时触发
DOMContentLoad: 在dom树构建完成后触发，不用等其他资源加载完成，这就是与load的区别
readstatechange:模拟DOMContentLoad
pageshow和pagehide:往返缓存，Firefox和Opera开发事件必须添加到window上
hashchange:url#后面的部分发生变化时触发，必须添加给window
没有冒泡的事件
focus blur mouseenter mouseleave load unload resize scroll
