什么是事件委托（事件代理）？有什么优点？

事件委托（Event Delegation）：利用事件冒泡机制，将子元素的事件处理函数绑定到父元素上，通过 event.target 判断实际触发事件的元素，从而统一管理。

实现代码：

document.querySelector('ul').addEventListener('click', function(e) {
  const li = e.target.closest('li');
  if (!li) return;
  console.log('点击了:', li.textContent);
});

优点：

1. 减少内存占用：不需要为每个子元素绑定事件，只需一个父级监听器
2. 动态元素支持：新增的子元素自动获得事件处理能力，无需重新绑定
3. 代码简洁：统一管理，减少重复代码

注意事项：

• 不是所有事件都冒泡（focus、blur、mouseenter、mouseleave、scroll、load 等）
• 需要使用 event.target 精确判断目标元素，避免误触发
• event.stopPropagation() 会阻止委托链

适用场景：

• 列表/表格（大量 li/tr）的点击事件
• 动态渲染的 DOM 节点
• 无限滚动加载的内容