当前位置：首页 > JavaScript

js实现委派

2026-03-02 04:33:05JavaScript

事件委派的概念

事件委派是一种利用事件冒泡机制，将子元素的事件监听绑定到父元素上的技术。通过判断事件触发时的目标元素（event.target），动态决定是否执行逻辑。这种方式能减少事件监听器的数量，提升性能，尤其适用于动态生成的子元素。

实现事件委派的核心步骤

1. 绑定父元素监听器
将事件监听器绑定到父元素（如 ul、table 等），而非每个子元素。父元素会捕获子元素冒泡的事件。

js实现委派

document.getElementById('parent').addEventListener('click', function(event) {
  // 通过 event.target 判断实际点击的子元素
});

2. 判断目标元素
使用 event.target 或 event.currentTarget 区分事件源。若需匹配特定子元素，可通过选择器或属性检查。

if (event.target.matches('li.item')) {
  console.log('子元素被点击', event.target.textContent);
}

3. 处理动态元素
事件委派天然支持动态添加的子元素，无需重新绑定监听器。新生成的子元素触发事件后会自动冒泡到父元素。

js实现委派

实际应用示例

场景：列表项点击事件

<ul id="taskList">
  <li data-id="1">任务一</li>
  <li data-id="2">任务二</li>
</ul>

document.getElementById('taskList').addEventListener('click', (event) => {
  const li = event.target.closest('li'); // 处理嵌套元素
  if (li) {
    console.log('任务ID:', li.dataset.id);
  }
});

场景：按钮组委派
通过 data-action 属性区分不同操作：

document.addEventListener('click', (event) => {
  const action = event.target.dataset.action;
  if (action === 'delete') {
    deleteItem(event.target.dataset.id);
  } else if (action === 'edit') {
    editItem(event.target.dataset.id);
  }
});