前言--关于事件
事件是元素(或者浏览器)天生自带的行为，只要行为触发，则会触发相关的事件行为；我们基于xxx.onxxx = function(){}属于事件绑定；给某个事件行为绑定方法，再行为触发的时候可以通知方法执行。
box.onclick = function (){};
//这不叫绑定事件，这是给事件绑定方法
事件有哪些
鼠标事件、表单事件、键盘事件、手指事件、其他事件...
鼠标事件
click 点击(PC) 单击(移动端)
contextmenu 鼠标右键
dblclick 双击
mousedown 按下
mouseup 抬起
mousemove 移动
mouseenter/mouseleave 进入/离开
mouseover/mouseout 滑过/滑出
wheel 滚轮滚动
表单事件
focus 获取焦点
blur 失去焦点
input 正在输入内容，内容改变
change 内容改变
checked/selected 选中
键盘事件
keydown 按下
keyup 抬起
keypress 长按(连续触发)
手指事件
单手指：touchstart/touchmove/touchend
多手指：gesture
其他事件
offline 断网
online 联网
animationstart/end/iteration
Animation动画事件 (CSS3)
transitionstart/end/run
Transition动画事件(CSS3)
fullscreenchange 全屏切换事件
resize 窗口大小改变
scroll 滚动条滚动
load 加载完
error 加载失败
timeout 加载超时
progress 加载中
abort 加载中断
H5中的拖拽事件
dragstart 拖拽开始
drag 拖拽中
dragend 拖拽结束
dragenter 进入到目标区域
dragleave 离开目标区域
dragover 在目标区域中拖动
drop 在目标区域释放
媒体事件(Audio/Video)
canplay/canplaythrough 可以播放(资源加载了一部分，播放过程中可能会卡顿)/可以播放且加载完(基本不会卡顿)
conplete 播放完成
durationchange/volumechange 播放时间改变/声音改变
play 播放
pause 暂停
playing 播放中
事件绑定
1.DOM0级事件绑定
xxx.onxxx = function(){}
(元素).on(事件) = function(){}
2.DOM2级事件绑定
EventTarget.prototype:addEventListener/removeEventListener/dispatchEvent
所有的DOM元素对象(含window)都是EventTarget的实例
非标准浏览器(IE<=8)：attachEvent/detachEvent
xxx.addEventListener/removeEventListener("xxx",function(){},false);
DOM0级事件绑定的原理
每一个DOM元素对象都有很多内置的私有属性，其中包含onxxx这样事件类的私有属性 =>DOM0事件绑定原理就是给这些事件类的私有属性赋值(当我们触发相关事件行为，浏览器会帮助我们把赋值的函数触发执行)
=>特点1：如果不存在某个事件类型的私有属性，则无法基于这种方式做事件绑定(例如 DOMContentLoaded(等待DOM资源加载完触发的事件))
=>特点2：只能给当前元素的某个事件类型绑定一个方法(私有属性只能赋值一个值)
box.onclick = function(){
console.log("哈哈");
}
DOM2事件绑定原理
利用浏览器的事件池机制来完成事件监听和绑定的
=>特点1：所有内置事件类型都可以基于这种方式进行事件绑定(例如：window.addEventListener("DOMContentLoaded",function(){}))
=>特点2：可以给当前元素的某一个事件类型绑定多个不同的方法
box.addEventListener("click",function(){
console.log("哈哈");
})
box.addEventListener("click",function(){
console.log("嘿嘿");
})
经典面试题
问：window.onload 和 document.ready的区别(JQ中的$(document).ready())
答： document.ready
1)它是基于DOM2级事件中事件监听实现事件绑定的，所以可以在相同页面中给事件绑定好多不同的方法，也就是可以使用多次
2)它监听的是DOMContentLoaded事件，等待DOM结构一加载完就会触发执行的
3)而window.onload本身基于DOM0级事件绑定，而且监听的是load事件，所以页面中不仅只能使用一次，而且需要等到浏览器所有资源都加载完毕才会触发执行，触发的节点要晚于DOMContentLoaded
