当前位置：首页 > JavaScript

js delegate 实现

2026-03-14 07:13:17JavaScript

事件委托的实现原理

事件委托利用事件冒泡机制，将子元素的事件处理程序绑定到父元素上。当子元素触发事件时，事件会冒泡到父元素，由父元素统一处理。这种方法能减少内存消耗并提高性能。

基本实现方式

使用addEventListener在父元素上监听事件，通过event.target判断触发事件的子元素：

document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target.matches('.child')) {
    // 处理子元素的点击事件
    console.log('Child element clicked');
  }
});

动态元素处理

对于动态添加的子元素，事件委托无需重新绑定事件：

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

多级委托处理

当需要处理嵌套元素时，使用closest方法查找匹配的祖先元素：

document.querySelector('ul').addEventListener('click', function(event) {
  const listItem = event.target.closest('li');
  if (listItem) {
    console.log('List item clicked:', listItem.textContent);
  }
});

性能优化建议

避免在委托函数中进行复杂的DOM查询。对于大量元素，使用精确的选择器匹配：

document.getElementById('table').addEventListener('click', function(event) {
  if (event.target.tagName === 'TD' && event.target.parentNode.rowIndex > 0) {
    // 只处理tbody中的td单元格
    handleCellClick(event.target);
  }
});

事件类型选择

常用的事件类型包括：

click：点击事件
change：表单元素变更
keydown：键盘事件
mouseover/mouseout：鼠标悬停

移除事件委托

需要移除时直接解除父元素的事件监听：

js delegate 实现

const handler = function(event) {
  if (event.target.matches('.item')) {
    console.log('Item clicked');
  }
};
document.getElementById('list').addEventListener('click', handler);

// 移除委托
document.getElementById('list').removeEventListener('click', handler);