JS学习笔记6

1.事件冒泡

由内而外的事件传播（从屏幕里飞出来一支箭的感觉）

2.事件捕获

由表及里的事件传播（力透纸背的感觉）

3.DOM事件流（DOM2级）

事件捕获阶段 -> 处于目标阶段 -> 事件冒泡阶段（拿根针从屏幕扎进去，缝衣服的感觉）

事件捕获是从DOM树根到叶子的事件传播，所以可以在靠近根的位置捕获（event.stopPropagation）事件，让叶子收不到事件信号

事件冒泡是从叶子到根的原路返回过程，所以可以在靠近根的位置集中处理（event.target）叶子的事件，也就是所谓的事件委托，集中处理可以避免给多个叶子绑定事件处理器，拉低响应速度

处于目标阶段只是规范要求，浏览器没怎么支持

注意：[IE9+]支持事件捕获，事件冒泡是全浏览器支持的

4.添加事件处理器的几种方式

HTML：on事件名 = strCode事件处理函数可直接访问的属性 = 全局属性 + 元素所在form中的属性 + 元素本身的属性

自动的作用域扩展方式相当于：

function(){
  with(document){//全局属性
    with(this.form){//表单属性
      with(this){
        //本身属性
      }
    }
  }
}

事件处理函数可以直接访问这么多属性，所以，可以这样做：

<form method="post">
  <input type="text" name="user_name" value="">
  <input type="button" value="获取用户名" onclick="alert(user_name.value)">
</form>

DOM0级：elem.on事件名 = functionName/null;

以这种方式添加的事件处理器在冒泡阶段执行，可直接访问的属性 = 全局属性 + 元素本身的属性
DOM2级：（现代浏览器支持的）elem.add/removeEventListener(事件名, functionName, false/true);

false表示在事件冒泡阶段添加，true表示在事件捕获阶段添加。可直接访问的属性同上
[IE8-]：elem.attach/detachEvent(on事件名（on不能丢了）, functionName);

可直接访问的属性只有全局属性，而且对同一事件添加的多个处理器中，最后添加的最先执行，与DOM2级标准相反

P.S.[IE8-]只支持事件冒泡，所以没有第三个参数，默认（也只能是）在事件冒泡阶段添加

5.事件对象有什么用？

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

注意：上面代码并不是全浏览器兼容的，事件对象的属性也不完整，更多信息请查看JS原生事件处理（跨浏览器）

6.事件分类

UI事件
焦点事件
鼠标事件
滚轮事件
文本事件
键盘事件
合成事件（用IME输入）
变动事件（DOM结构更新）
HTML5事件
设备事件（特定设备，比如游戏机）
触摸与手势事件

7.事件委托

利用事件冒泡来减少事件处理器，以提升性能。甚至可以给document对象添加事件处理器，以求更短的交互准备时间（页面元素与事件处理器建立连接需要时间）

事件委托的优点：

设置事件处理器需要时间更少，因为DOM访问次数变少了
占用内存空间更少，因为事件处理器变少了
交互准备时间变短了，因为页面元素与事件处理器之间需要建立的连接变少了
页面响应速度变快了，因为页面元素与事件处理器之间建立的连接变少了

8.移除事件处理器的注意事项

在目标元素被从DOM树中删除前应该手动移除与之绑定的事件处理器，避免失效的事件处理器占用内存

在页面unload之前，最好手动移除页面中的所有事件处理器，因为[IE8-]在unload页面时，事件处理器会滞留在内存中。可以在unload事件处理器中移除

移除事件处理器的实质是断开页面元素与事件处理器之间的连接

9.模拟事件的方式（即代码触发指定事件）

创建event对象
初始化event对象的各项属性
触发事件

注意：[IE8-]的实现与DOM规范不同；DOM3级才能完美模拟键盘事件

10.常识及性能优化策略

只有在需要拦截别的事件时才把事件处理器添加在捕获阶段，因为[IE8-]不支持事件捕获
对于动态创建的img元素，只要设置了src属性就会开始下载相关内容，而不是在新元素被插入DOM树后才开始
对于动态创建的script元素，只有插入DOM树后才会开始下载
对于动态创建的link元素（用来加载外部样式），只有插入到head部分才能保证浏览器表现一致，而且外部样式默认是异步加载的
用in操作符来检测事件支持，例如：
```
if('onload' in elem){
  //do sth
}
```
hover, mouseover, mouseout, mouseenter, mouseleave的区别是什么？
- hover是CSS伪类，鼠标进入并处于目标元素中时触发；
- mouseover是鼠标事件，鼠标进入目标元素时触发，得到了浏览器广泛支持。相当于mouseenter，但nouseenter没有得到完全支持；
- mouseout与mouseover相反，mouseleave与mouseenter相反，后者没有得到完全支持；
- 本机测试：FF和IE全支持，Chrome不支持enter/leave。
事件委托是最重要的优化策略，当然，委托也不是完美的，委托会导致逻辑粘连，比如极端的情况，给document对象添加一个事件处理器就够了，但那将是一个很大只的函数。。。所以，应该在合适的地方尽量用委托
适时移除过期的时间处理器可以减少内存占用，这是空间方面的优化策略