请简述事件委托

事件委托 例子

Q:你要给100 个按钮添加点击事件，怎么办？ A：监听这100个按钮的 祖先，等冒泡的时候判断 target 是不是这100个按钮中的一个。

优点

• 省内存
• 可以监听动态元素

封装事件委托

用函数 on(‘click’,'#testDiv’, ‘span’,fn)

<div id='testDiv'>
    <span>哈哈</span>
</div>

用户点击“哈哈”，调用函数fn

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