js 实现 delegate

事件委托的实现原理

事件委托利用事件冒泡机制，将子元素的事件处理程序绑定到父元素上。通过事件对象的target属性可以识别实际触发事件的子元素。

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

基础实现方法

创建通用的事件委托函数需要指定父元素、事件类型、子元素选择器和处理函数。

function delegate(parent, eventType, selector, handler) {
  parent.addEventListener(eventType, function(e) {
    let target = e.target;
    while (target && target !== parent) {
      if (target.matches(selector)) {
        handler.call(target, e);
        break;
      }
      target = target.parentNode;
    }
  });
}

处理动态添加的元素

事件委托的优势在于能够自动处理后续动态添加的子元素，无需重新绑定事件。

// 动态添加按钮后依然有效
document.getElementById('container').innerHTML += '<button class="btn">New Button</button>';

delegate(document.body, 'click', '.btn', function() {
  console.log('Button clicked:', this.textContent);
});

性能优化建议

对于大量子元素的情况，使用更精确的选择器能提高事件委托效率。避免在父元素上绑定过多委托事件。

// 更精确的选择器提升性能
delegate(document.getElementById('list'), 'click', 'li.item:not(.disabled)', handleItemClick);

浏览器兼容性处理

需要处理旧版浏览器可能不支持matches方法的情况，提供polyfill方案。

// 兼容性处理
Element.prototype.matches = Element.prototype.matches || 
  Element.prototype.msMatchesSelector;

事件委托的适用场景

最适合使用事件委托的场景包括：动态内容列表、大量相似元素、需要统一管理事件的情况。不适合需要精确控制事件传播的场景。