1. 事件流
用户在浏览器上任何一个事件触发，都会引起事件流的执行。
例如：用户在浏览器中任何一个地方做了鼠标点击，事件流会立刻从document顶节点开始，向下一层一层遍历，直到找到鼠标点击的节点对象，然后查看该节点是否有点击事件，如果有就调用事件处理函数，没有或事件已经调用完成，就向上一层一层传播该类型事件，每到一层就检查该层是否有相同类型的事件，如果有就调用，没有就继续向上传播，直到document节点结束
1.1 事件捕获阶段
从dom树的顶级节点开始向下层层查找，事件激活目标节点，执行事件监听处理函数
1.2 事件目标阶段
找到目标节点后，查看是否有事件处理函数的绑定，如果有就调用
1.3 事件冒泡阶段
从目标节点一层一层的传播事件，并调用各层的事件处理函数，直到dom树的顶级节点结束
2. 阻止事件冒泡/事件捕获
e.stopPropagation(); 非IE
window.event.cancelBubble=true; IE
3. 事件对象
触发Dom上某个事件的时候，都会有一个event对象，event在事件处理程序执行的时候被创建，执行完毕被销毁
所有的事件都需要一个对象来绑定
element.onclick点击事件的执行对象是element(鼠标事件)，事件对象是mouseevent
window.onscroll滚动事件的执行对象是window(窗口事件)，事件对象是event
所有的事件都叫event
4. 事件绑定
4.1 行间事件
行间属性 onclick='事件处理函数'
特点：简单方便，不方便维护，不方便封装，作用域污染
4.2 DOM对象属性绑定
ele.onclick=function(){}
特点：js和html完全分离，便于封装，实现解耦，一次只能绑定一个处理函数，不灵活不方便维护
4.3 事件监听器绑定
ele.addEventListener('事件类型',事件处理函数，bool)
参数三：用来控制事件传播方向
true事件捕获 false事件冒泡
特点：可以动态绑定，动态删除，注册多个事件，给同一个ele，便于封装维护
5. 事件对象e
e打印出来是事件对象，里面包含所有的事件属性
鼠标坐标：
clientX窗口
screenX屏幕
pageX文档
offsetX目标元素
6. 事件模型
dom0级和dom2级可以同时存在
dom0级同一元素，同一事件，就算方法不同，也只能同时存在一个，后面的会覆盖前面
onclick dom0级
事件监听 dom2级
7. 事件移除
removeEventListener清除指定的方法，不会将所有方法都清除
事件监听无法直接移除匿名函数方式注册的事件处理函数，因此在使用时，推荐使用命名方式注册的时间事件处理函数，方便后期动态修改
8. 常用事件汇总
8.1 表单
blur 失去焦点
focus 获取焦点
change 确认输入完成后，(敲回车/失去焦点)触发
select 被选中
8.2 键盘
keydown 键盘按下
keyup 键盘抬起
keypress 键盘按下（监听的是字符按键）
8.3 鼠标
click 点击
dblclick 双击（300ms内）
mouseover 鼠标滑过
mouseout 鼠标滑出
mouseenter 鼠标进入（不支持冒泡）
mouseleave 鼠标离开（不支持冒泡）
mousedown 鼠标按下（左键）
mouseup 鼠标左键抬起
mousewheel 鼠标滚轮滚动
8.4 UI事件
load 加载成功
error 加载失败
scroll 滚动条
resize 浏览器窗口大小
