委托模式

<div id="delegation">
<button type="button">提交</button>
<button type="button">返回</button>
<button type="button">重置</button>
</div>

然后只要给容器元素注册点击事件，它的3个子元素也就能执行这个点击事件，这其实就是一种委托，再通过事件对象的target属性，就能分辨出当前运行在哪个事件目标上。

var container = document.getElementById("delegation")
container.addEventListener("click",function(event)
{
    event.target;
},false);

使用委托后就能避免对容器中的每个子元素进行事件注册，并且如果在容器中动态添加子元素，新加入的子元素也能使用容器元素上注册的事件，而不用单独绑定一次事件处理程序。做到“预测未来”的作用

currentTarget 和 target的区别
target属性指向的是事件目标，currentTarget指向的是正在处理当前事件的对象，发生事件传播时，target指向的可能不是定义时的事件目标，而currentTarget始终指向定义时的事件目标。
例如target可能指向三个不同的button，而currentTarget始终指向div。

委托模式还能处理一些内存外泄的问题，老版本的IE浏览器的引用计数垃圾回收机制，使得那些队DOM元素的引用没有显性清除的数据会遗留在内存中，除非关闭浏览器，否则无法清除。例如：

<div id="btn_container">
    <button id="btn">demo</button>
</div>
var g = function(id){ return document.getElementById(id)}
g('btn').onclick = function(){
    //g('btn').onclick = null;
    g('btn_container').innerHTML = '触发了事件';
}

为btn的元素添加绑定事件，再触发时，父元素中重置内容，这样将会将按钮自身覆盖掉，然而g变量保存的元素绑定的click事件没有清除，所以这个事件就会泄露到内存中，所以可以在父元素设置内存前显性地清除事件.然而这个清楚事件地语句在一些标准浏览器中是不需要的，因为他们采用标记清除方式管理自身地内存，所以更好的办法是使用委托模式

g('btn_container').onclick = function(e){
    //获取触发事件元素
    var target = e && e.target || window.event.srcElement;
    //判断触发事件元素是否是btn元素
    if(target.id === 'btn'){
        g('btn_container').innerHTML = '触发了事件';
    }
}

委托模式优化了页面中的事件绑定，解决了请求与委托者之间的耦合，通过被委托者接收到的请求的处理后，分发给相应的委托者去处理