总结
事件委托（Event Delegation）是 JavaScript 中一种重要的事件处理机制，它利用了事件冒泡的特性，将事件的处理程序绑定到父元素或祖先元素上，而不是直接绑定到具体的子元素上。
什么是事件委托？
事件冒泡：在 DOM 中，事件通常会从触发元素开始，然后逐级向上冒泡到其父元素、祖先元素，直到 window 对象。核心思想：事件委托的核心思想是利用事件冒泡机制，在父元素上监听事件，而不是在每个子元素上绑定事件处理程序。适用场景：当页面中存在大量子元素需要绑定相同事件时，使用事件委托可以显著减少事件监听器的数量，提高性能。
事件委托的优点
性能优化
减少绑定的事件处理程序数量，节省内存。特别适用于动态生成的 DOM 元素，无需为新增元素重新绑定事件。
简化代码
代码更简洁，维护更容易。可以统一处理某一类事件。
兼容性好
事件委托是原生 JavaScript 支持的功能，兼容性良好。
事件委托的实现原理
事件冒泡：当子元素触发某个事件（如 click、mouseover 等）时，该事件会向上冒泡到父元素。事件对象：通过事件对象的 target 属性可以获取实际触发事件的元素。条件判断：在父元素的事件处理函数中，根据 event.target 的属性（如 [id](file://d:\Code\Gitee\video-project\node\public\js\index-D1JaxrYk.js#L0-L0)、class 或 tagName）来判断具体是哪个子元素触发了事件，并执行相应的逻辑。
示例代码：
document.getElementById("parent").addEventListener("click", function (event) {
if (event.target && event.target.matches("li")) {
console.log("点击了列表项:", event.target.textContent);
}
});
使用场景
动态内容：当 DOM 元素是动态加载的（如通过 AJAX 加载），使用事件委托可以确保新添加的元素也能响应事件。列表或表格操作：如点击表格某一行进行操作、点击列表项展开详情等。表单验证：在表单中为多个输入框统一绑定 blur 或 input 事件。
注意事项
事件冒泡与捕获：事件委托通常依赖于事件冒泡阶段，但在某些情况下也可以使用捕获阶段。选择合适的父元素：事件委托应尽量绑定在离目标元素最近的静态父元素上，以避免不必要的性能损耗。阻止事件冒泡：在某些情况下，可能需要使用 event.stopPropagation() 阻止事件继续冒泡。