js实现委派

事件委派的概念

事件委派是一种利用事件冒泡机制，将子元素的事件监听统一委托给父元素处理的技术。通过判断事件触发时的目标元素（event.target），可以动态响应子元素的事件，减少重复绑定和内存消耗。

实现事件委派的核心步骤

绑定父元素监听器
为父元素添加事件监听，指定事件类型（如click）。父元素需是子元素的共同祖先节点。

document.getElementById('parent').addEventListener('click', handleEvent);

判断目标元素
在事件处理函数中，通过event.target获取实际触发事件的子元素，根据需求过滤或匹配特定子元素。

function handleEvent(event) {
  if (event.target.matches('.child-class')) {
    // 处理目标子元素的逻辑
  }
}

动态子元素支持
由于事件委派依赖冒泡机制，后续动态添加的子元素无需重新绑定，天然支持事件响应。

实际应用示例

场景：列表项点击
假设有一个动态增减的列表，需监听每个<li>的点击事件：

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

委派实现代码

document.getElementById('list').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('Clicked:', event.target.textContent);
  }
});

优势

• 减少事件监听器数量，提升性能。
• 自动适配动态添加的<li>元素，无需重复绑定。

注意事项

• 事件类型：委派适用于冒泡阶段的事件（如click），不适用于无冒泡的事件（如focus）。
• 阻止冒泡：若子元素调用event.stopPropagation()，委派会失效。
• 精确匹配：使用event.target.matches()结合CSS选择器可精准过滤目标元素。

通过事件委派，可以高效管理大量相似元素的事件，尤其适合动态内容场景。