javascript事件委托

---

之前看[JavaScript高级程序设计](http://baike.baidu.com/link?
url=QjuAf9_rMBKZFVSU5w-zTOzkmekDjUda7D9zRrdNXd3_v3FHp1SlKHHBaqWmfUnzKH6LFVI4_5iUiXH2sOLIMa),看到代理、委托的概念，突然就想到了C#里面的Delegate,但平时没怎么用，就有点不熟悉了，今天我来记录下。

简述

事件委托，我个人理解就是:

常用事件包括click,dblclink,change等

委托就是交给给别人去做，而不是自己亲自去做。

实质就是将自己的事务嘱托他人代为处理。

示例

下面有一个无序列表，现在我需要给li添加绑定事件。

<ul id="parent-list">
    <li id="post-1">Item 1</li>
    <li id="post-2">Item 2</li>
    <li id="post-3">Item 3</li>
    <li id="post-4">Item 4</li>
    <li id="post-5">Item 5</li>
    <li id="post-6">Item 6</li>
</ul>

常见做法:

<script type="text/javascript">
$list = document.getElementsByTagName("li");
for(var i = 0 ; i < $list.length; i++){
  $list[i].addEventListener("click",function(e) {
    console.log("current click li, id :"+e.target.id);
  })
};
</script>

就是可以给每个独立的li元素添加事件监听器，但有时这些li元素可能会被删除，可能会有新增，监听它们的新增或删除事件将会是一场无法麻烦的事情，万一是当你的监听事件的代码放在应用的另一个地方时。

第二种解决方案

如果对于事件的三个阶段有印象的同学，可能就会想到。

捕获阶段->目标->冒泡阶段

js捕获和冒泡

我们可以把事件在处理放在冒泡的过程，这样处理就可以放在目标的父元素中，无论目标元素怎么改变，都没有什么影响。

看代码：

<script type="text/javascript">
//给父元素添加监听器
document.getElementById("parent-list").addEventListener
   ("click",function(e) {
    // e.target是被点击的元素!
    // 如果被点击的是li元素
  console.log(e.target);
    if(e.target && e.target.nodeName == "LI") {
        // 找到目标，输出ID!
        console.log("current click li, id :"+e.target.id);
    }
});
</script>

第一步是给父元素添加事件监听器。当有事件触发监听器时，检查事件的来源，排除非li子元素事件。如果是一个li元素，我们就找到了目标！如果不是一个li元素，事件将被忽略。

结论

如果大量的对元素直接进行事件绑定，会消耗大量的资源。少量的可以忽略。
而且做为前端开发，那 事件委托 这项技能一定是必不可少的。我也十分提倡，更多的使用事件委托，少使用事件绑定。

---

如果您对本篇文章有兴趣，或者正在学习，或者是技术爱好者，也或者有知识可以分享，那么欢迎关注“一起玩前端”微信号，一起交流学习。

一起玩前端~欢迎关注