【JavaScript】通用事件监听（支持代理）函数

原理实现

此函数能够满足普通事件绑定和事件代理，什么是事件代理？因为DOM树形结构的原因，js绑定事件会触发冒泡机制，既在不阻止冒泡的情况下，会触发父元素绑定的事件，因此可以利用此机制来实现事件代理，父节点绑定事件，子节点（e.target）触发，这样可以减少代码量，使结构更加清晰。

代码实现

/**
 * @deprecated 通用事件监听（支持代理）函数
 * @param {String} elem 需要被监听的dom节点
 * @param {String} type 事件类型
 * @param {String} selector 需要触发代理的dom节点
 * @param {Function} fn 回调函数
 */
function bindEvent(elem, type, selector, fn) {
  if (fn == null) {
    fn = selector
    selector = null
  }
  elem.addEventListener(type, function (e) {
    var target
    if (selector) {
      // 代理
      target = e.target
      if (target.matches(selector)) {
        fn.call(target, e)
      }
    } else {
      // 不使用代理
      fn()
    }
  })
}