使用事件代理来优化dom事件的绑定

发表于 |

事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。

我们有下面的一个场景:当点击li输出相应的值

1
2
3
4
5
6
7

<ul class="list-item">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
</ul>

我们可以这样写

1
2
3
4
5
6
7
8

var itemDom = document.getElementByClass("item")
for(var i=0, l = itemDom.length; i < l; i++){
        this.addEventListener("click",function{

          //TODO
        });
    }

其实这里面就有一个问题，如果li少的话都还行，如果有成千上万条的话就非常的占用性能

我们根据dom的冒泡性质可以这样修改，将事件绑定在ul上，并通过e.target去处理目标节点

1
2
3
4
5
6
7
8
9
10
11
12
13
document.getElementsByClassName("list-item")[0].addEventListener("click",function(e) {
  // 检查事件源e.targe是否为Li
  if(e.target && e.target.nodeName == "LI") {

    console.log(e.target.innerText)
  }
});

//juqery

$('.list-item').on('click', '.item', function() {
  alert($(this).text())
})

在ie下面我们要使用e.srcElement来获取事件源，srcElement.tagName能够捕获活动标记名称

如果对您有所帮助或者对博主有更多的话说，欢迎你去我的GitHub留下一个您的start和issues

前往LEE的github给他一个Start鼓励一下吧