当前位置：首页 > JavaScript

js事件委托实现

2026-02-02 23:55:31JavaScript

事件委托的原理

事件委托利用事件冒泡机制，将子元素的事件监听绑定到父元素上。通过事件对象的target属性识别实际触发事件的子元素，减少事件监听器的数量，提升性能。

实现步骤

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

document.getElementById('parent').addEventListener('click', function(event) {
  // 事件处理逻辑
});

识别目标子元素
通过event.target获取实际触发事件的子元素，结合条件判断（如tagName、classList）筛选目标。

if (event.target.classList.contains('child-class')) {
  // 处理特定子元素的逻辑
}

动态元素支持
事件委托天然支持动态添加的子元素，无需重新绑定监听器。新子元素触发事件时会冒泡到父元素。

js事件委托实现

完整代码示例

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

<script>
  document.getElementById('list').addEventListener('click', function(event) {
    if (event.target.classList.contains('item')) {
      console.log('Clicked item:', event.target.textContent);
    }
  });

  // 动态添加的子元素自动生效
  setTimeout(() => {
    const newItem = document.createElement('li');
    newItem.className = 'item';
    newItem.textContent = 'Item 3';
    document.getElementById('list').appendChild(newItem);
  }, 1000);
</script>