javascript事件代理（委托）

标签：

　　之前有接触过事件代理，但是印象并不深刻。这次记下来加强印象。

　　用个大家比较常见的代码举例子：

　　html dom结构：

<ul id="ul1">
   <li>001</li>
   <li>002</li>
   <li>003</li>
</ul>

<script>
var oUl = document.getElementById(‘ul1‘);
var aLi = oUl.getElementsByTagName(‘li‘);
for (var i = 0, i = aLi.length; i++) {
　　aLi.onclick = fn;
}
</script>

　　需求：如果需要给每个li添加点击事件。

　　常规实现方法：遍历每个li，给每个li单独加点击事件。

　　缺点：

　　　　1、假如现在页面有很多个li，比如门户新闻网站新闻列表。如果需要遍历的话，比较影响性能。

　　　　2、如果新添加一个li，比如发微博的时候，刚刚发出来的微博，会不会刚发出来的微博就带事件了。

　　　　　　针对第2点：答案是新创建的元素是不带有之前遍历的事件，因为在创建元素之前，已经遍历完li，给已经存在的li加事件了。

　　解决方案：

　　　　为了解决上面这两个缺点，我们用事件代理，也叫事件委托的方式实现。

　　　　为了更好理解事件委托，应该先了解一下事件冒泡知识。在这里，我就不详细说事件冒泡了。

　　　　根据事件冒泡或者捕获的特性，我们可以给ul加点击事件。

　　代码：

var oUl = document.getElementById(‘ul1‘);
oUl.onclick = function(ev) {
    var ev = ev || event;
    //兼容处理
    var target = ev.target || ev.srcElement;
　　//找到li元素
    if (target.nodeName.toLowerCase() == ‘li‘) {
          //li添加的事件
          fn();
     }
}

　　总结：虽然ev对象有一定的兼容性，但是在此处兼容性处理并不难。其实事件委托本质就是给多组元素的父级加事件，再利用冒泡或者捕获找到下面的子元素，然后单独绑定事件。

javascript事件代理（委托）

标签：

原文地址：http://www.cnblogs.com/Aralic/p/4446030.html