事件委托在 Javascript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。所导致这一问题的原因是

定义

在 Javascript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。所导致这一问题的原因是多方面的。首先每个函数都是对象，都会占用内存;内存中的对象越多，性能就越差。其次必须事先指定所有事件处理程序而导致的 DOM 访问次数，会延迟整个页面的交互就绪时间。
优点: 提高页面性能可以监听动态元素

事件委托使用场景

假设给 100 个按钮添加点击事件 code演示:

//html 代码
<div id="x">
   <button data-id="one">1</button>
   <button data-id="two">2</button>
   <button data-id="three">3</button>
   <button data-id="four">4</button>
   *******************
</div>
// Js代码
x.addEventListener('click',(e) =>{
   const t = e.target
   if(t.tagName.toLowerCase() === 'button'){ 
      console.log('button'被点击了)
      console.log('button'内容是 + t.textContext)
      console.log('button 的data-id是:' + t.data-id) 
      
 }
})