封装一个通用的事件监听函数

封装一个通用的事件监听函数，可实现普通的事件监听，也可实现事件委托（事件代理）

function bindEvent(el, type, selector, fn) {
  // 如果第四个参数不存在，则第三个参数就是fn
  if (!fn) {
    fn = selector
    selector = ''
  }
  // 普通的事件监听
  if (!selector) {
    el.addEventListener(type, fn)
    return
  }
  // 事件委托
  el.addEventListener(type, event => {
    let element = event.target
    // 点击的元素是否匹配期望的选择器
    while (!element.matches(selector)) {
      if (element === el) {
        element = null
        break
      }
      element = element.parentNode
    }
    element && fn.call(element, event, element)
  })
}

var beginButton = document.querySelector('.begin')
var body = document.body

// 普通点击事件
bindEvent(beginButton, 'click', e => {
  e.stopPropagation()
  console.log(e.currentTarget)
})

// 事件委托
bindEvent(body, 'click', '.stop', e => {
  console.log(e.target)
  console.log(e.currentTarget)
})