事件委托（代理）：就是利用事件冒泡机制，在最顶层触发事件的dom对象上绑定一个处理函数。在当有需要很多dom对象要绑定事件的情况下，可以使用事件委托。
事件委托的好处是：节省资源 和 新增的元素也会有事件处理机制（这是项目中比较常见的问题）
简要的用两个例子来解释一下事件委托这回事...
先说说要产生的效果：我的想法是利用按钮点击新增li标签，而且新增的li标签也要有点击事件...
HTML 代码
<ul id="ul1">
<li>1111</li>
</ul>
<input type="button" value="新增li元素" id="btn">
JAVASCRIPT 代码
*普通的事件处理
var oUl1 = document.getElementById(‘ul1‘);
var oBtn = document.getElementById(‘btn‘);
var aLi = oUl1.getElementsByTagName(‘li‘);
//遍历li元素
for(var i = 0 ; i < aLi.length ; i++){
//利用li元素点击
aLi[i].onclick=function(){
alert(‘我是普通处理弹出的‘);
}
}
var num = 1;
//当点击按钮的时候创建新的 li 标签 然后添加到ul中
oBtn.onclick=function(){
var oNewLi = document.createElement(‘li‘);
//给新标签添加内容
oNewLi.innerHTML = aLi[0].innerHTML * ++num;
//添加到ul中，此时点击的时候你会发现新增的li的点击事件不起效了
oUl1.appendChild(oNewLi);
}
//*事件委托处理
var oUl1 = document.getElementById(‘ul1‘);
var oBtn = document.getElementById(‘btn‘);
var aLi = oUl1.getElementsByTagName(‘li‘);
var num = 1;
oBtn.onclick=function(){
var oNewLi = document.createElement(‘li‘);
//给新标签添加内容
oNewLi.innerHTML = aLi[0].innerHTML * ++num;
//添加到ul中，此时点击的时候你会发现新增的li的点击事件生效了
oUl1.appendChild(oNewLi);
}
//利用父级元素点击
oUl1.onclick=function(ev){
var oEvent = ev || event;
//事件源,要做兼容性处理 oEvent.target为IE的, oEvent.srcElement为W3C的
var target = oEvent.target || oEvent.srcElement;
//为了源的准确性，我们要做一下判断点击的是不是想要发生事件的元素,因为输出的是大写的字符串，那么我们就遵从用大写的字符串来做判断
if(target.nodeName==‘LI‘){
target.onclick=function(){
alert(‘我是事件委托弹出的‘);
}
}
}
总结：其实就是在父级上绑定事件，然后用它的事件源来查找到相应的元素，那么对应的元素执行一些其它功能。从而达到新增的元素不会失去事件处理。
javascript 事件委托（代理）