事件委托

怎样写一个事件委托

简单版本如下

// HTML
<ul id="xxx">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

// JS
xxx.addEventListener('click',(e)=>{
  if(e.target.tagName.toLowerCase() ==='li'){
    console.log('我被点击了')
  }
})

这有一个弱点，该事件委托匹配的 DOM 的标签名字，如果 li 里面套有其他标签被点击时，这就无法被委托了，这不符合我们预期，所以有改进空间

// HTML
<ul id="xxx">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444<span>我是 span 元素</span></li>
</ul>

xxx.addEventListener('click',(e)=>{
    let el = e.target
    while(el !== e.currentTarget){
    if(el.tagName.toLowerCase === 'li'){
        console.log('我被点击了')
    }
    el = el.parentNode
  }
})

利用冒泡原理，当点击 li 里面的标签时，在其中加一个判读，直到找到 li 为止，直到最顶层的 ul 结束

「@浪里淘沙的小法师」