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('我是事件委托弹出的');

     }

   }

 }

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