事件委托是什么？有什么好處？

• 假設(shè)父元素有一堆兒子，我不監(jiān)聽兒子們，而是監(jiān)聽父親，看觸發(fā)事件的是哪個(gè)兒子，這就是事件委托。
• 還可以監(jiān)聽還沒有出生的兒子（動(dòng)態(tài)生成的元素節(jié)點(diǎn)），省監(jiān)聽器。
  事件委托嘛，隨手就來一個(gè)

function listen(element, eventType, selector, fn) {
  const el = document.querySelector(element)
  el.addEventListener(eventType, e => {
    if (e.target.matches(selector)) {
      fn.call(e.target, e)
    }
  })
}

相信大部分寫出的代碼都是這樣子的把，

本著能用就好，

應(yīng)付面試官也夠用，

就這么將就把，

但是這串代碼卻是存在 BUG 的。

再讓我們繼續(xù)來看看一個(gè)工資 12k+ 的前端寫的時(shí)間委托代碼

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

最后，拿去輕松愉快擼代碼把~