事件委托（Event Delegation）是一种JavaScript编程技术，它利用了事件冒泡（event bubbling）的原理，使得事件处理器不必直接绑定到多个子元素上，而是将其绑定到它们共同的父元素上。当子元素触发某个事件时，该事件会沿着DOM树向上冒泡，直到到达已设置事件处理器的父元素。父元素的事件处理器会检查事件的事件源（event.target）以确定是哪个具体的子元素触发了事件，并据此做出相应处理。
这样做有几个明显的好处：
- 提高性能：减少事件处理器的数量，特别是当有许多动态生成的子元素时，不需要为每一个新生成的元素单独绑定事件处理器。
- 简化代码：只需在单一父级元素上进行事件绑定和解绑操作。
- 降低内存消耗：较少的事件处理器意味着占用更少的内存。
示例代码（使用原生JavaScript）：
// 假设有一个动态生成的列表元素集合
var listContainer = document.getElementById('list-container');
// 为列表容器的父元素绑定 click 事件
listContainer.addEventListener('click', function(event) {
// event.target 是触发事件的实际元素
var target = event.target;
// 检查点击是否发生在子元素 <li> 上
if (target.tagName.toLowerCase() === 'li') {
// 执行针对列表项的点击处理逻辑
console.log('Clicked on list item:', target.textContent);
// 这里可以根据target执行不同的操作，例如修改样式、更新数据等
}
});
// 动态生成列表项的例子
for (var i = 0; i < 100; i++) {
var listItem = document.createElement('li');
listItem.textContent = 'List Item ' + (i + 1);
listContainer.appendChild(listItem);
}
// 即使列表项目是动态生成的，由于事件委托，所有新添加的列表项也会响应 click 事件
在这个示例中，我们没有为每个列表项 <li> 分别绑定 click 事件，而是将事件处理器绑定在包含所有列表项的父元素 list-container 上。当用户点击列表中的任何一个 <li> 时，事件会冒泡到 list-container，然后在该父元素上的事件处理器中根据 event.target 判断点击行为，并执行相应的操作。这意味着无论之后向列表中添加多少新的 <li>，它们都能自动响应点击事件，而无需再次绑定事件处理器。
