事件委托

事件委托是指将事件处理程序添加到父级元素上，而不是将事件处理程序添加到每个子元素上，从而利用事件冒泡机制，在父元素上捕获子元素的事件

好处：

1. 这样可以减少事件处理程序的数量，提高性能。

2. 同时还可以动态地处理新添加的子元素的事件，不需要重新为每个子元素添加事件处理程序。

代码示例

const list = document.querySelector('#list'); 
list.addEventListener('click', function(e) { 
    if (e.target.tagName === 'LI') { 
       fn()
    } 
});

使用递归完成事件委托

// 父元素element、事件类型eventType、子元素选择器selector和事件处理函数fn
function delegate(element, eventType, selector, fn) {
  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
}