实现事件委托

• 思路： 1.点击 li 里面的 span 后，递归遍历 span 的祖先元素，看其中有没有 ul 里面的 li 。

function delegate(element,eventType,selector,fn){
  element.addEventListener(eventType,e=>{
    let el = e.target  //点击的 span
    while(!el.matches(selector)){
      if(element === el){ //找不到 ul 中的 li
        el = null 
        break
      }
      el = el.parentNode
    }
    el && fn.call(el,e,el)  
  })
  return element
}

delegate(ul,'click','li',f1)

• 事件委托的好处 1.节省监听器；
  2.实现动态监听。

• 事件监听的缺点 1.调试比较复杂，不容易确定监听者。