javascript遍历&事件代理(委托)

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

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

  • 001
  • 002
  • 003

缺点:
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遍历&事件代理(委托))