javascript 事件委托（代理）

事件委托（代理）：就是利用事件冒泡机制，在最顶层触发事件的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('我是事件委托弹出的');

}

}

}

总结：其实就是在父级上绑定事件，然后用它的事件源来查找到相应的元素，那么对应的元素执行一些其它功能。从而达到新增的元素不会失去事件处理。