JS学习笔记（事件）

该文章参考自：http://www.ayqy.net/blog/js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B06_%E4%BA%8B%E4%BB%B6/
1、事件冒泡
由内而外的事件传播，从确定到不确定

2、事件捕获
由表及里的事件传播，从不确定到确定

3、DOM事件流
事件捕获阶段–》处于目标阶段–》事件冒泡阶段
事件冒泡是从叶子到根的原路返回，所以在靠近根的位置集中处理的事件也就是所谓的事件委托，可以避免多个叶子绑定事件处理器，拉低响应速度。
【IE9+】支持事件捕获，事件冒泡是全浏览器支持的

4、添加事件处理器的几种方式
1）HTML：on事件名；可访问的属性包括全局属性+元素所在form表单中的属性+元素本身的属性

2）DOM0级：element.on事件名=functionName、NULL；可访问的属性包括全局属性+元素本身的属性

3）DOM2级：element.add/removeEventListener(事件名，functionName，false/true);false表示在事件冒泡阶段添加，true表示在事件捕获阶段添加。

4）【IE8-】element.attach/detach(on事件名，functionName)；对于同一个事件添加的多个处理器中，最后添加的最先执行，与DOM2级标准相反。
只支持事件冒泡，所以没有第三个参数，在事件冒泡阶段添加。

5、事件对象有什么用

btn.onclick=function(event){
    event.target;//获取事件源
    event.preventDefault();//取消默认行为，比如连接的跳转
    event.stopPropagation();//阻断事件传播
}

6、事件分类
1）UI事件
2）焦点事件
3）鼠标事件
4）滚轮事件
5）文本事件
6）键盘事件
7）合成事件
8）变动事件
9）HTML5事件
10）设备事件
11）触摸与手势事件

7、事件委托
利用事件冒泡来减少事件处理器，以提升性能，甚至可以给document对象添加事件处理器，以求更短的交互准备时间。
事件委托的优点：
1）设置事件处理器需要时间更少，因为DOM访问次数变少了
2）占用内存空间更少，因为事件处理器变少了
3）交互准备时间变短了，因为页面元素与事件处理器之间需要建立的连接变少了
4）页面响应速度变快了，因为页面元素与事件处理器之间建立的连接变少了。

8、移除事件处理器的注意事项
在目标元素被从DOM树中删除前应该手动移除与绑定的事件处理器，避免失效的事件处理器占用内存。
在页面unload之前，最好手动移除页面中的所有事件处理器，因为IE【8-】在unload页面时，事件处理器会滞留在内存中，可以在unload事件处理器中移除。
移除事件处理器的实质是断开页面元素与事件处理器之间的连接。