JavaScript中的事件代理和事件委托在 JavaScript 中，事件代理（Event Delegation）

在 JavaScript 中，事件代理（Event Delegation） 和事件委托其实是同一个概念的不同称呼，指的是同一种事件处理模式，没有本质区别。

它们的核心思想是：不直接在事件目标元素上绑定事件处理器，而是将事件处理器绑定到目标元素的父级（或更上层的祖先元素），利用事件冒泡机制来处理目标元素的事件。

原理

当子元素触发某个事件（如 click、mouseover）时，事件会按照 DOM 层级向上冒泡，最终到达父级元素。此时，父级元素可以通过事件对象（event）的 target 属性判断具体是哪个子元素触发了事件，从而执行相应的处理逻辑。

示例说明

假设页面中有一个列表，需要给每个列表项绑定点击事件：

<ul id="list">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

传统方式（直接绑定）：

// 需遍历每个子元素绑定事件
const items = document.querySelectorAll('#list li');
items.forEach(item => {
  item.addEventListener('click', () => {
    console.log('点击了：', item.textContent);
  });
});

事件代理 / 委托方式（绑定到父级）：

// 只需给父元素绑定一次事件
const list = document.getElementById('list');
list.addEventListener('click', (e) => {
  // 通过 e.target 判断触发事件的具体子元素
  if (e.target.tagName === 'LI') {
    console.log('点击了：', e.target.textContent);
  }
});

优势

减少内存消耗：无需为每个子元素绑定事件，只需绑定一次到父级，尤其适合子元素数量多的场景（如长列表）。
动态适配：新增的子元素会自动继承事件处理，无需重新绑定（传统方式需要手动绑定新元素）。
简化代码：避免大量重复的事件绑定逻辑。

总结

事件代理和事件委托是同一个概念，没有区别，只是命名不同。
核心是利用事件冒泡，将子元素的事件处理委托给父级元素，从而优化性能和代码维护性。