事件委托，js中的一种优化方法

浏览数：40 / 时间：2015年06月09日

在前端编程中，我们常会遇到一种叫做事件委托的方法。

那么，

什么是事件委托呢？

简单来说，事件就是指onclick,onmouseover,onmouseout等大部分事件，为什么说是大部分后面会提到，因为有些例外；委托就是本来由元素x自己来做的事，让其父元素代为办理，这个就像儿子的学费由老子来交一样。

事件委托的原理？

事件委托的原理很简单，主要利用的javascript的事件冒泡机制。具体来讲就是，当事件源是文档或者文档元素时，在不主动阻止事件冒泡的情况下，事件会按着dom树结构由事件源逐级传递至顶端document对象，最后到达window对象。而event对象的event.target(IE9以下的event.srcElement)指向事件源，因此我们在父级元素上监听事件也可以获得触发该事件的最原始元素。

注意：focus，blur和scroll事件是不会冒泡的；文档元素上的load事件会冒泡，但传递到document对象时会终止，不会再传递给window对象，只有当整个文档都加载完毕时，才会触发window对象的load事件。

事件委托的的好处?

1、不用为每个子元素都添加单独的事件处理程序，提高页面性能尤其是当页面中存在大量子元素时。

2、动态添加的子元素也具有了相应的事件处理能力。

一个简单的例子：

DOM结构：

<ul id="myul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

JS部分：

var myul=document.getElementById(‘myul‘);
myul.onclick=function(e){
    var e=e||window.event;　　//window.event兼容IE9以下版本
    a=e.target||e.srcElement;　//e.srcElement兼容IE9以下版本　   
　　 alert(a.innerHTML);
};
var b=document.createElement(‘li‘);
b.innerHTML="4";
myul.appendChild(b);

这样我们就不再需要用for循环为每个li添加onclick事件了，并且后面添加的li元素也具有了处理onclick事件的能力。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

事件委托，js中的一种优化方法