JS学习笔记6_事件 – 苏demo的别样人生

1.事件冒泡

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

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

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

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

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

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

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

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-]只支持事件冒泡，所以没有第三个参数，默认（也只能是）在事件冒泡阶段添加

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

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

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

事件委托的优点 ：

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

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

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

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

只有在需要拦截别的事件时才把事件处理器添加在捕获阶段，因为[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对象添加一个事件处理器就够了，但那将是一个很大只的函数。。。所以，应该在合适的地方尽量用委托
适时移除过期的时间处理器可以减少内存占用，这是空间方面的优化策略

打赏

   如果本篇文章对您有帮助，欢迎向博主进行赞助，赞助时请写上您的用户名。

   支付宝直接捐助帐号oracle_lee@qq.com 感谢支持！