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

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

那么，

什么是事件委托呢？

简单来说，事件就是指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事件的能力。

下面这个例子：弹窗可能会经常用到，点击非子元素的父元素区域时，父元素隐藏，点击子元素不隐藏。

CSS部分：

body{
    margin:0;
    padding:0;
}
#div1{
    width:100%;
    height:100%;
    background:#000;
    opacity:0.5;
    filter:alpha(opacity=50);
    position:fixed;
}
#div2{
    width:500px;
    height:500px;
    top:50%;
    left:50%;
    margin-left:-250px;
    margin-top:-250px;
    background:green;
    position:absolute;
}

DOM结构：

<div id='div1'>
<div id="div2"></div>
</div>

javascript部分：

var div1=document.getElementById('div1');
div1.onclick=function(e){
    var e=e||window.event;
    var o=e.target||e.srcElement;
    if(o==this)        //this也可以替换成div1
    {
        this.style.display="none";
    }
    else
    {
        return false;
    }
}