事件机制
JS与HTML的交互是通过事件实现的，事件代表文档或者浏览器窗口中某个有意义的时刻
可以向文档或者文档中的元素添加事件侦听器来预订事件
事件流
事件流描述了页面接收事件的顺序
IE和网景公司提出了几乎完全相反的事件流方案：事件冒泡和事件捕获
事件冒泡
IE事件流被称为事件冒泡
这是因为事件被定义从最具体的元素开始触发，然后向上传播到没那么具体的元素
事件捕获
网景团队提出了事件捕获
最不具体的节点最先开始接收事件，最具体的节点最后收到事件
DOM事件流
DOM2中将事件流分为3个阶段：事件捕获、到达事件、事件冒泡
事件捕获最先发生，为提前拦截时间提供了可能
然后实现的目标元素接收到事件
最后是冒泡，最迟要在这个阶段响应事件
DOM事件级别
DOM有4次版本更新，与DOM版本变更，产生了3种不同的DOM事件 ：DOM 0级事件处理，DOM 2级事件处理和DOM 3级事件处理
由于DOM 1级中没有事件的相关内容，所以没有DOM 1级事件。
DOM0级事件
把一个函数赋值给一个事件处理程序属性
btn.onclick = function(){...}
其中，事件处理程序会在元素的作用域中运行，即this等于元素本身，并且this.id就是元素的ID
可以通过this访问元素的任何属性和方法
以这种方式添加事件处理程序是注册在事件流的冒泡阶段的
将事件处理程序属性的值设置为null，即可移除DOM0方式添加的事件处理程序
btn.onclick = null
DOM2级事件
新定义了两个方法：addEventListener和removeEventListener，这两个方法暴露在所有DOM节点上，接收三个参数：事件名、处理函数、布尔值，其中布尔值中的true表示在捕获阶段调用事件处理程序，false（默认值）表示在冒泡节点调用事件处理程序
要移除事件必须在removeEventListener中传入在addEventListener中注册的函数的名字，就能将其移除，不能移除匿名函数
同一个元素的同种事件可以绑定多个函数，按照绑定顺序执行
DOM3级事件
DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，增加的类型如下：
- UI事件，当用户与页面上的元素交互时触发，如：load、scroll
- 焦点事件，当元素获得或失去焦点时触发，如：blur、focus
- 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup
- 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
- 文本事件，当在文档中输入文本时触发，如：textInput
- 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
- 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
- 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
- 同时DOM3级事件也允许使用者自定义一些事件
事件委托
又称事件代理，事件委派
事件委托利用事件冒泡，可以只使用一个事件处理程序来管理一种类型的事件
不在事件的发生地（直接 dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素 DOM 的类型，来做出不同的响应
最经典的就是 ul 和 li 标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在 li 标签上直接添加，而是在 ul 父元素上添加
优点：减少整个页面所需的内存，提升整体性能节省，花在设置页面事件处理上的时间
