事件：
事件是浏览器赋予元素的默认行为，事件是天生具备的，不论我们是否为其绑定方法，当某些行为触发的时候，相关的事件都会触发执行。
浏览器赋予元素的事件行为： developer.mozilla.org/zh-cn/docs/…
鼠标事件
-
click 点击事件（pc： 频繁点击N次，触发N次点击事件）单击事件（移动端：300ms内没有发生第二次点击 操作，算作单击事件行为，所以click在移动端会有300ms延迟）‘
-
dbclick 双击事件
-
contextmenu: 鼠标右键点击事件
-
mousedown 鼠标按下
-
mouseup 鼠标抬起
-
mousemove 鼠标移动
-
mouseover 鼠标划入（具有冒泡特性）
-
mouseout 鼠标划出（具有冒泡特性）
-
mouseenter 鼠标进入
-
mouseleave 鼠标离开
-
wheel 鼠标滚轮滚动
键盘事件
-
keydown 键盘按下
-
keyup 键盘抬起
-
keypress 长按（除了shift/Fn/CapsLock键除外）
- 手指事件
【Touch Event 单手指事件模型】
-
touchstart 手指按下
-
touchend 手指抬起
-
touchmove 手指移动
【 Gesture Event 多手指事件模型】
表单事件
-
focus 获得焦点
-
blur 失去焦点
-
submit 表单提交（前提：表单元素都包含在form中，并且点击的按钮是submit）
-
reset 表单重置（前提：表单元素都包含在form中，并且点击的按钮是reset）
-
select 下拉框内容选中
-
change 内容改变
-
input 移动端中经常使用的，监控文本框中的内容随着输入的改变而触发
-
...
资源事件
-
load 加载成功（window.onload / img.onload）
-
error 加载失败
-
beforeunload 资源加载之前（window.beforeunload 页面关闭之前）
-
...
CSS3动画事件
-
transitionend transition动画结束
-
transitionstart transition动画开始
-
transitionrun transition动画运行中
-
...
视图事件
-
resize 元素（浏览器）大小改变
-
scroll 滚动条滚动
-
...
事件绑定
给元素默认的事件行为绑定方法，这样可以在行为触发的时候，执行这个方法。
DOM0级事件绑定
语法：元素.on【事件】 = 【函数】
document.body.onclick = function () {}
移除绑定： 赋值为null或者其他非函数值皆可
document.body.onclick = null;
原理： 每一个dom元素对象的私有属性上都有很多类似于“onxxx”的私有属性，给这些元素 的私有属性赋值，就是DOM0级事件绑定。
- 如果没有对应事件的私有属性值（例如： DOMDContentLoaded） 则无法基于这种办法实现事件绑定。
- 只能给当前元素的事件行为绑定一个方法，绑定多个方法，最后一个操作覆盖以往的
- 好处：执行效率快，开发使用方便。
DOM2级事件绑定
语法：元素.addEventListener('事件名'，'方法'，【捕获/冒泡】)
document.addEventListener('click', fn1, false)
移除事件绑定：【元素】.removeEventListener(【事件】，【方法】， 【捕获/冒泡】)，需要参数和绑定的时候一样。
document.removeEventListener('click', fn1, false)
原理：每一个DOM元素都会基于原型链的查找机制，查找到EventTarget.prototype上的addEventListener/removeEventListener等方法，基于这下方法实现事件的绑定和移除；DOM2事件绑定采用事件池机制；
-
DOM2事件绑定，绑定的方法一般不是匿名函数。主要目的是方便移除事件绑定时使用
-
凡是浏览器提供的事件行为，都可以基于这种模式完成事件的绑定和移除（例如： window.onContentLoaded是不行的，因为没有这个私有属性，但可以window.addEventListener('DOMContentLoaded', fn1)）
-
可以给当前元素的某个事件类型绑定多个不同的方法（进入到事件池），这样事件行为触发，会从事件池中依次（按照绑定的顺序）去取对应的方法然后执行。
