开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情
1 注册事件（绑定事件）
给元素添加事件，称为注册事件（绑定事件）
注册事件有两种方式
1. 传统注册方式
●利用 on 开头的事件（onclick）
<button onclick=“alert('hello~')”></button> 或 btn.onclick = function() { }
●特点： 注册事件的唯一性
●同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
2. 方法监听注册方式
●w3c 标准推荐方式 addEventListener()
●IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
●特点：同一个元素同一个事件可以注册多个监听器
●按注册顺序依次执行
2 删除事件（解绑事件）
1. 传统注册方式
eventTarget.onclick = null;
2. 方法监听注册方式
eventTarget.removeEventListener(type, listener[, useCapture]);
eventTarget.detachEvent(eventNameWithOn, callback);
删除事件兼容性解决方案
3 DOM 事件流
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM事件流
DOM 事件流分为3个阶段
1捕获阶段
2当前目标阶段
3冒泡阶段
比如我们给一个div 注册了点击事件
冒泡阶段
ELEMENT HTML
捕获阶段
ELEMENT BODY
当前目标阶段 ELEMENT DIV
鼠标事件
触发条件
鼠标点击左键触发
ONCLICK
鼠标经过触发
ONMOUSEOVER
鼠标离开触发
ONMOUSEOUT
获得鼠标焦点触发
ONFOCUS
失去鼠标焦点触发
ONBLUR
鼠标移动触发
ONMOUSEMOVE
鼠标弹起触发
ONMOUSEUP
鼠标按下触发
ONMOUSEDOWN
常用鼠标事件对象
event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象 MouseEvent和键盘事件对象 KeyboardEvent。
常用的键盘事件
事件除了使用鼠标触发，还可以使用键盘触发。
注意
●使用 addEventListener 不需要加 on
●onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
●三个事件的执行顺序是： keydown --> keypress ---> keyup
●onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
在我们实际开发中，我们更多的使用 keydown 和 keyup， 它能识别所有的键（包括功能键）
键盘事件对象中的 keyCode 属性可以得到相应键的ASCII码值
