事件委托

概念

事件委托又叫事件代理，事件委托就是利用事件冒泡，只制定一个事件处理程序，就可以管理某一类型的所有事件。
在js中事件冒泡得知，子元素身上的事件会冒泡到父元素身上。事件代理就是将未来子元素身上的时间加在了父元素身上，当子元素时间触发时，会一级一级向上执行，这样我们就可以让父元素上代为执行。通过Event对象可判断是哪个子元素触发了事件。

为什么使用委托

dom对象都需要有事件处理函数，我们可以直接对每一个dom设置处理函数，但是如果我们有很多dom需要添加事件处理呢？如果我们有100个a标签，每个a标签都有相同的click事件。大家都能想到的方法是通过for循环，遍历每个a标签添加事件以达到目的。但是这样做又有什么缺点呢？
在JavaScript中，添加到页面上的处理事件程序的数量讲直接关系到页面整体的运行性能，因为需要不断的访问dom节点进行交互，dom操作是一个很耗费性能的操作，这样事件过多就将会引起浏览器延长整个界面交互的时间。所以减少dom操作也是性能优化的一个重要环节。
每一个函数都是一个对象，每个对象都会占用一定的内存空间，对象越多占用的空间也就越大，性能就会越来越差。
又如果，因页面美化原因，我们这100个a标签是懒加载的形式，我们不知道当前页面有多少个a标签，也不知道一共有多少个a标签，这样通过for循环的方式是不是又无法达到目的了呢。
此时，如果我们是用时间委托，那么我们就可以只对他们的父级元素这一个对象进行操作，无论是dom操作和事件操作，相对于for循环的方式都节省了很多资源，新增对象也无需再添加事件，自然性能就更优。

代码示例

<div id='parent'>
  <a href='#' id='baidu'><a>
  <a href='#' id='jianshu'><a>
</div>
var dom = document.getElementById('parent');
dom.addEventListener('click', function(e) {
  if(e.target.nodeName.toLowerCase == 'a') {
    if(e.target.id == 'baidu') {
      location.href = "http://www.baidu.com";
    } else if (e.target.id == 'jianshu') {
      location.href = "http://www.jianshu.com";
    }
  })
}