事件委托机制（Event Delegation）是一种高效处理大量类似事件的方法，通过将事件监听器添加到一个共同的父元素上，而不是为每个子元素都绑定事件监听器。这种方式不仅可以减少内存消耗，还能简化事件处理代码，提升性能。
目录
事件委托的工作原理
事件委托依赖于事件冒泡机制。事件冒泡指的是，当某个元素上的事件被触发时，该事件会沿着 DOM 树从目标元素向上传播，直到到达最顶层的 document 对象。如果在事件冒泡过程中，有任何一个元素设置了相应的事件监听器，那么该监听器就会被执行。
借助这一特性，可以在一个共同的父元素上设置事件监听器，从而捕捉到所有子元素的事件。
常见使用场景
- 动态生成的元素：当页面中的元素是动态生成的，如评论框、动态列表等，使用事件委托可以避免为新增加的元素重新绑定事件。
- 高频率用户操作：如点击事件、多选框的选择事件等，在同一个父元素上代理这些事件可以显著提升性能。
实现事件委托的步骤
基本示例
以下是一个简单的例子，展示如何使用事件委托来实现对动态列表项的点击事件处理。
假设有一个 ul 列表，其子元素 li 是动态生成的：
<ul id="parent">
<li class="child">Item 1</li>
<li class="child">Item 2</li>
<li class="child">Item 3</li>
</ul>
在 JavaScript 中实现事件委托：
// 获取父元素
const parent = document.getElementById('parent');
// 为父元素添加事件监听器
parent.addEventListener('click', function(event) {
// 检查事件目标是否为需要的子元素
if (event.target && event.target.matches('li.child')) {
console.log('List item clicked:', event.target.textContent);
}
});
动态元素处理
如果我们动态地添加新的 li 元素，也无需为新元素单独绑定事件，因为事件监听器已经附加在父元素上了：
// 动态添加新元素
const newItem = document.createElement('li');
newItem.className = 'child';
newItem.textContent = 'New Item';
parent.appendChild(newItem);
// 新元素会自动被事件委托机制捕获，不需要额外绑定事件
事件目标判定
在事件委托中，正确判定事件目标非常重要。在以上示例中，使用 event.target 属性来获取实际点击的元素，并通过 matches 方法判断该元素是否为我们需要处理的目标。
可以根据需要使用其他选择器或属性来精确匹配事件目标。例如，可以使用 closest 方法查找符合条件的祖先元素：
parent.addEventListener('click', function(event) {
const targetElement = event.target.closest('li.child');
if (parent.contains(targetElement)) {
console.log('List item clicked:', targetElement.textContent);
}
});
事件委托的优缺点
优点
- 降低内存消耗：减少了事件监听器的数量，从而降低了内存消耗和开销。
- 简化代码维护：只需为父元素绑定一个事件监听器，集中管理，逻辑更加清晰。
- 动态元素支持：新添加的子元素无需重新绑定事件监听器，自动继承父元素的事件。
缺点
- 事件目标判定复杂：需要额外的逻辑来判定实际的事件目标，增加了代码量。
- 不适合全局事件：一些特定的全局事件（如
scroll，resize）不适合使用事件委托。
总结
事件委托是提升 JavaScript 应用性能的有效技术之一，通过将事件监听器绑定到公共父元素上，减少了内存消耗和事件管理的复杂度。在处理动态生成内容和高频用户操作时，事件委托尤为适用。通过正确判定事件目标，可以灵活处理各种场景下的用户交互需求。希望本文能帮助你
标签：委托,元素,事件,监听器,机制,动态,event From： https://blog.51cto.com/u_16123429/12007243