事件委托高级版

1 低级版

• 如果li元素里面有span元素，那么点击span元素fn不会执行

 ul.addEventListener('click', function(e){
     if(e.target.tagName.toLowerCase() === 'li'){
         fn() // 执行某个函数
     }
 })

2 高级版

• 点击 span 后，递归遍历 span 的祖先元素看其中有没有 ul 里面的 li
• 如果遍历到了最外层元素，break跳出
• 这样就算点击最里面的span，fn也会执行

<ul>
  <li ><span class='xxx'>1</span></li>
  <li ><span class='xxx'>2</span></li>
  <li ><span class='xxx'>3</span></li>
</ul>

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
   }