js 实现 delegate

实现事件委托的基本原理

事件委托是利用事件冒泡机制，在父元素上监听子元素的事件。通过判断事件的目标（event.target）来执行对应的操作。这种方式可以减少事件监听器的数量，提升性能。

基础实现代码示例

function delegate(parentSelector, childSelector, eventType, handler) {
  const parent = document.querySelector(parentSelector);

  parent.addEventListener(eventType, function(event) {
    const target = event.target;
    if (target.matches(childSelector)) {
      handler.call(target, event);
    }
  });
}

支持更复杂的选择器匹配

如果需要匹配更复杂的选择器关系（如子元素内部的元素），可以改进匹配逻辑：

function delegate(parentSelector, childSelector, eventType, handler) {
  document.querySelector(parentSelector).addEventListener(eventType, function(e) {
    let el = e.target;
    while (el && el !== this) {
      if (el.matches(childSelector)) {
        handler.call(el, e);
        break;
      }
      el = el.parentNode;
    }
  });
}

使用示例

// 委托给ul处理所有li的点击事件
delegate('ul', 'li', 'click', function() {
  console.log('Clicked on:', this.textContent);
});

// 委托给div处理所有.button类的点击事件
delegate('.container', '.button', 'click', function() {
  this.classList.toggle('active');
});

注意事项

事件委托时需要注意事件目标可能不是直接匹配的子元素，而是子元素内部的元素。上述改进版本通过向上遍历DOM树来解决这个问题。

某些事件（如focus/blur）不会冒泡，需要使用它们的冒泡版本focusin/focusout。

现代浏览器已经原生支持事件委托模式，可以通过Element.matches()方法判断事件目标。