简述事件委托

js里的事件委托：当事件触发时，把想要做的事情委托给父元素处理。

场景一：当我们要为这多个button按钮添加点击事件时,可以遍历

• 这样子做可以实现，但是十分浪费监听数，有25个button就有25个一模一样的函数创建了，十分浪费内存。
• 最好的解决办法就是利用dom的事件模型何不把这件事情给他们的父亲呢，代码如下

场景二：如果要监听目前不存在的元素的点击事件。

• 监听祖先，等点击的时候看看是不是我想要监听的元素即可。

事件委托的优点

1. 省监听数（内存）
2. 可以监听动态元素

封装事件委托

function on(eventType, element, selector, fn) {
  if (!(element instanceof Element)) {
    element = document.querySelector(element)
  }
  element.addEventListener(eventType, (e) => {
    let  t = e.target
    while (!t.matches(selector)) {
      if (element === t) {
        t = null
        break
      }
      console.log(t)
      t = t.parentNode
      console.log(t)
    }
    t && fn.call(t, e, t)
  })
  return element
}

on('click', '#div1', 'button', () => {
  console.log('button被点击了')
})