实现事件委托

[innerWang]

针对 ul>li{$}*3

document.querySelector('ul').addEventListener('click',(e)=>{
  if(e.target.tagName.toLowerCase() === 'li'){
    console.log('click li...')
  }
})

上述写法在遇到 ul>(li>div>div>div.box{$})*3 时，若点击的是最内层的 div.box，则永远无法输出信息。

let lists = document.querySelector('ul')
lists.addEventListener('click',(e)=>{
  let target = e.target
  while(target !== lists){
    if(target.tagName.toLowerCase() === 'li'){
       console.log('click li...')
       break;
    }
    target = target.parentNode
  }
})

[innerWang]

// 要取父节点，所以要传入el ，作为监听的DOM元素
// 要传入想要看是谁触发的事件
// 要传入事件类型
// 要传入触发时执行的函数

function delegate(el,eventType,targetSelector,fn){
  el.addEventListener(eventType,e =>{
    let target = e.target;
    while( target !== el){
      if(target.matches(targetSelector)){
        // 回调函数的this为 currentTarget
        fn.call(el, e)
        break;
      }
      target = target.parentNode
    }
  })
}

list = document.querySelector('ul')
delegate(list,'click','li',function(e){
  console.log('点我了')
  console.log(this)
   console.log(e)

})