转载

JS学习笔记6_事件

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

正文到此结束

所属分类：编程技术

本文标签： HTML5 list CSS value UI DOM tar Document HTML js 空间 ip 时间参数测试代码 Chrome
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二