事件委托

原理

事件委托是利用事件的冒泡原理来实现的，何为冒泡事件呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行的顺序a>li>ul>div，有这样一个机制，那么我们给外面的div加点击事件，那么里面的ul,li,a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托他们父级代为执行事件。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>凤梨</li>
</ul>

// good
document.querySelector('ul').onclick = (event) => {
  let target = event.target
  if (target.nodeName === 'LI') {
    console.log(target.innerHTML)
  }
}

// bad
document.querySelectorAll('li').forEach((e) => {
  e.onclick = function() {
    console.log(this.innerHTML)
  }
})

更详细的文档请点击