JavaScript事件代理(事件委托)

简单说下为什么要有事件委托
比如我们有1w个li, 要实现每个li点击触发事件, 如果对每个li都进行事件绑定那就太耗性能了
不科学
因此把点击事件绑定在父元素就好了, 例如ui上
当发生li点击事件的时候冒泡到父元素上, 然后父元素再去找是哪个子元素被点击了
因此只要绑定一个监听事件在父元素上就好了

/*
@param  parentElem 父元素
@param  type 事件类型
@param  childElem 子元素
@param  fn 触发的事件
*/
function bindEvent(parentElem, type, childElem, fn) {
  if (fn == null) {
    fn = childElem;
    childElem = null;
  }
  // 委托给父元素
  parentElem.addEventListener(type, e => {
    var target;
    // 如果有孩子元素就代表要做事件处理
    if (childElem) {
      target = e.target(); // 代表获取当前触发事件的元素
      if (target.matches(childElem)) {
        fn.call(target, e); // 指定触发元素为target上下文, 传入事件
      } else {
        fn(e); //如果没有我要的子元素就不用进行事件代理
      }
    }
  });
}