javascript遍历&事件代理（委托）

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

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

<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>

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