Better

事件委托，这个名词听上去贼专业的样子，如果你问我什么是事件委托，之前的我可能回答不出来，但是平时却一直是按照事件委托的方式开发的。本质其实是一个简单的知识点。

概念

事件委托，也叫做事件代理。委托它们父级代为执行事件。

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

使用场景

最典型的例子就是UL>LI，如果需要点击LI标签的时候响应我们的事件，我们可以直接在LI标签上添加事件，但是这里有一个问题就是，如果LI标签很多，我们循环绑定多个事件，同时绑定事件后新追加的LI标签不会有事件，此时有需要重新绑定。这样的处理能达到效果，但是就显得很愚，主要原因如下：

• 性能不好
  • 事件数量角度：在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；
  • 内存角度：每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了。
• 重复操作
  新添加的子元素一开始的没有事件的，需要重新解绑事件。

具体使用

• 具体工作中，每个子元素响应的功能操作肯定不一样，采用事件委托时候，事件响应进入同一个Handle，那么如何针对性的处理呢，我们可以通过e.target得到事件源，然后得到事件源的属性值，根据属性是来区分。在jQuery中，可以给元素使用data-attrname的方式添加属性，js代码中使用obj.data('attrname')得到值。
• 需要注意的是不是所有的事件都可以使用委托的方式，比如focus，blur之类的，本身就没用冒泡的特性，也就不能用事件委托了。