關於事件委託的嘗試

1 常寫代碼

 ul.addEventListener('click', function(e){
     if(e.target.tagName.toLowerCase() === 'li'){
         fn() // 執行某個函數
     }
 })

之前一直用的很好，但是在某次li中有span的時候發現了bug，如果用戶點擊的是 li 裏面的 span，就沒法觸發 fn，這顯然不對。

2 代碼改良

思路是點擊 span 後，遞歸遍歷 span 的祖先元素看其中有沒有 ul 裏面的 li。

 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
}