JavaScript之事件委托和事件代理
事件委托概念:
事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件。
简单的说就是原本需要一个一个去处理的事件,现在只需要一个总的事件去管理他们即可 (自己理解的,可能有偏差)
用事件委托的意义
在JavaScript中,添加到页面上的事件处理次数将关系到页面的整体运行性能,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,因此减少DOM操作是性能优化的主要思想之一。
每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率越大。如果要用事件委托,就会将所有的操作放到js程序里面,只对它的父级(如果只有一个父级)这一个对象进行操作,与dom的操作就只需要交互一次,这样就大幅度的减少与dom的交互次数,提高性能。
事件委托的原理
事件委托是利用事件的冒泡原理来实现的,就是事件从最深的节点开始,然后逐步向上传播事件。
例如:页面上有这么一个节点树,给最里面的节点加一个onclick事件,那么这个事件就会一层一层的往外执行。如果给最外面的div加点击事件,那么里面的节点做点击事件的时候,都会冒泡到最外层的节点上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。
事件冒泡及捕获
事件处理过程分三个阶段:
- 事件捕获阶段:当某个元素触发某个事件,顶层的document就会发出一个事件流,随着DOM节点向目标元素节点流去,直到找到目标节点。注意:该过程事件相应的监听函数不会被触发的。
- 事件目标阶段:找到目标节点之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。
- 事件起泡阶段:从目标节点开始,往顶层节点传播。途中如果有节点绑定了相应的事件处理函数,这些函数都会被触发。
事件委托的优点
- 大大减少了监听管理的函数。
- 可以动态添加和修改元素
- JavaScript和DOM节点之间的关联变少,进而减少了因循环引用而带来的内存泄漏发生的概率。
实现用事件委托达到直接处理节点一样效果
Event对象提供了一个属性叫target,可以返回事件的目标节点,target就可以表示为当前的事件操作的dom,但是不是真正操作dom。
注意:标准浏览器用ev.target,IE浏览器用event.srcElement
此时只是获取了当前节点的位置,并不知道是什么节点名称,就用nodeName来获取具体是什么标签名。这样实现了用事件委托达到直接处理节点一样效果,且每次只执行一次dom操作。
<script>
window.onload=function(){
var a=document.getElementById("a1");
a.onclick=function(ev){
var ev =ev || window.event;
var target=ev.target || ev.srcElement;
if(target.nodeName =='li'){
alert("哈哈");
}
}
}
</script>
可以用事件委托的事件:
所有用到按钮的事件,多数的鼠标事件和键盘事件,例如:click,mousedown,mouseup,keydown,keyup,keypress。
注意:mouseover和mouseout虽然也有事件冒泡,但是处理它们的时候需要特别的注意,因为需要经常计算它们的位置,处理起来不太容易