事件委托

一般的简单写法是这样的

ul.addEventListener('click',e => {
  if(e.target.tagName.toLowerCase() === 'li'){
      console.log("li被点击了")
  }
})

但是这样做会有个问题,就是如果点击了li的子元素就不会触发事件了,所以我们改写成这样

我们写一个方法,它接受四个参数

1. 绑定事件的元素
2. 事件类型
3. 选择器
4. 回调函数

function bindEvents(element,eventType,selector,fn){
  element.addEventListener(eventType, e => {
    let el = e.target
    while(!el.matches(selector)){
      if(el === element){
        el = null
        break
      }
      el = el.parentNode
    }
    el && fn.call(el,e,el)
  })
  return element
}

1. 找到被点击的元素
   let el = e.target
2. 不停向上找找到事件元素的父元素,将它和目标元素进行比较
   el = el.parentNode
3. 失败的情况:
   如果直到父元素和最外层元素(用来接收事件的元素)相等
   el === element
   都没有不能和目标选择器匹配
   则不触发事件,将el置为null,结束循环

    while(!el.matches(selector)){
      if(el === element){
        el = null
        break
      }
      el = el.parentNode
    }

el && fn.call(el,e,el)不执行

4. 成功的情况:
   如果找到selector,那么循环条件(!el.mathes(selector))为false,循环结束
   el && fn.call(el,e,el)执行,调用fn
   不知道call方法怎么用的可以看这里/或者看mdn