在JavaScript / HTML中，事件委托和普通绑定事件的区别

事件委托和普通绑定事件虽然都用addEventListener，但它们的核心区别在于事件绑定的目标和处理方式不同。普通绑定是直接给每个具体元素添加监听，而事件委托则是把监听挂载到共同的祖先元素上，利用事件冒泡机制统一处理。

为什么事件委托更推荐？

1. 减少内存占用，提升性能
   如果需要给大量子元素（比如一个长列表的每一项）绑定相同事件，普通绑定会创建很多个监听函数，占用内存；而事件委托只需要一个监听函数，开销小得多。

2. 对动态添加的元素同样有效
   普通绑定只对页面初始化时存在的元素生效，后续通过 JS 动态添加的元素无法自动获得事件。事件委托则因为监听在父元素上，只要事件冒泡上来，就能捕获到，无需重新绑定，非常适合动态列表、表格等场景。

3. 逻辑集中，便于维护
   所有相关事件处理都写在一个地方，可以统一管理，避免散落在各处导致代码冗余或难以调试。

举例说明

假设一个<ul>列表，点击每个<li>时弹出其内容。

普通绑定：

constitems=document.querySelectorAll('li');items.forEach(item=>{item.addEventListener('click',(e)=>{console.log(e.target.innerText);});});

缺点：如果后来新增了<li>，它不会有点击事件。

事件委托：

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

只需在<ul>上监听一次，新添加的<li>也能自动响应点击。

关于“更复杂”的说明

事件委托确实需要写if判断目标元素，但这是必要且可控的。相比普通绑定可能带来的性能和动态维护问题，这个小小的判断完全值得。在实际开发中，这种模式非常成熟，也是面试中常考的性能优化手段。

总之，事件委托不是万能的（比如不冒泡的事件无法委托），但在处理大量或动态的同类元素时，它的优势远大于那一点点判断的“复杂度”。