事件委托：利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。将原本在子元素上的事件委托给祖先元素。例如下列有多个 li,每个 li都要点击事件，我们可能会用 for 循环给每个 li添加一个函数，这样对内存的消耗是非常大的，将 li的点击事件绑定到父元素 ul 上是一个比较好的办法，这就是委托事件。
<ul id="name">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
因此事件委托的好处有以下两点：
1、节省大量内存
如果 li 数量很多，将大大减少 dom 的操作，节省大量内存占用，优化性能，这里用父级做事件处理，当 li 被点击时，事件就会被冒泡到 ul 上，ul 上的事件就会触发，但是这里点击 ul的时候事件也是会触发的，如果想让事件委托的效果跟直接在节点的事件效果一样怎么办，如果说只有点击 li 才会触发事件，那么这里 Event对象提供了一个 target 属性，可以返回事件的目标节点，称为事件源，那么 target 就可以表示当前事件操作的 dom。
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(123);
alert(target.innerHTML);
}
}
}
2、动态绑定
新增子对象时无需再次对其绑定，假设上述的例子中列表项li就几个，我们给每个列表项都绑定了事件；在很多时候，我们需要通过 AJAX 或者用户操作动态的增加或者删除列表项li元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。
window.onload = function(){
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
var num = 4;
//事件委托，添加的子元素也有事件
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = "red";
}
};
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = "#fff";
}
};
//添加新节点
oBtn.onclick = function(){
num++;
var oLi = document.createElement('li');
oLi.innerHTML = 111*num;
oUl.appendChild(oLi);
};
}
注意：
适合事件委托：click，mousedown，mouseup，keydown，keyup，keypress。
不适合的事件委托：mousemove、focus，blur之类的。
转载：
