当前位置：首页 > JavaScript

js事件委托实现

2026-03-16 00:24:16JavaScript

事件委托的基本原理

事件委托利用事件冒泡机制，将子元素的事件监听绑定到父元素上。当子元素触发事件时，事件会冒泡到父元素，父元素通过判断事件源（event.target）来执行对应的处理逻辑。

实现步骤

创建父元素和多个子元素的HTML结构

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

使用JavaScript实现事件委托

document.getElementById('parent-list').addEventListener('click', function(event) {
  if(event.target.classList.contains('item')) {
    console.log('List item clicked:', event.target.textContent);
  }
});

动态元素处理

事件委托特别适合处理动态添加的元素，新添加的子元素会自动继承父元素的事件监听

const parent = document.getElementById('parent-list');
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = 'New Item';
parent.appendChild(newItem);

// 新添加的元素无需单独绑定事件

性能优化

相比为每个子元素单独绑定事件，事件委托能显著减少内存占用

// 传统方式（不推荐）
const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('click', handleClick);
});

// 委托方式（推荐）
document.getElementById('parent-list').addEventListener('click', handleClick);

事件过滤

可以通过更精确的条件来过滤需要处理的事件目标

document.getElementById('parent-list').addEventListener('click', function(event) {
  if(event.target.tagName === 'LI' && event.target.classList.contains('item')) {
    // 处理逻辑
  }
});