如何用纯现代JavaScript实现支持动态元素的事件委托？

这其实就是事件委托的应用，和你用jQuery的.on()实现的逻辑完全一致——核心是利用事件冒泡机制，把事件监听器绑定到一个始终存在的父元素（比如document）上，然后在事件触发时判断实际触发的元素是否匹配你要监听的选择器，这样不管元素是一开始就存在还是后来动态添加的，都能触发对应的处理逻辑。

基础实现代码 #

直接对应你给出的jQuery示例，原生JS的写法如下：

// 绑定change事件委托到document
document.addEventListener('change', function(event) {
  // 检查触发事件的元素是否匹配目标选择器
  if (event.target.matches('input:checkbox')) {
    // 调用你的处理函数，同时确保this指向触发事件的checkbox，和jQuery行为一致
    onCheckboxChange.call(event.target, event);
  }
});

关键知识点解释 #

• event.target：指的是实际触发事件的DOM元素（比如你点击的那个动态添加的checkbox）
• matches()方法：用来判断DOM元素是否符合指定的CSS选择器，这就对应jQuery.on()方法里的第二个选择器参数
• call()：用来把处理函数的this指向设置为触发事件的元素，和jQuery事件处理函数里的this行为保持一致，这样你的onCheckboxChange函数不用做太多修改就能直接复用

封装成可复用的函数 #

如果需要多次使用事件委托，可以封装一个类似jQuery.on()的工具函数，让代码更简洁：

function delegateEvent(parentElement, eventType, selector, handler) {
  parentElement.addEventListener(eventType, function(event) {
    const targetElement = event.target;
    // 匹配选择器才执行处理逻辑
    if (targetElement.matches(selector)) {
      // 绑定this指向并传递event对象
      handler.call(targetElement, event);
    }
  });
}

// 使用方式和jQuery非常相似
delegateEvent(document, 'change', 'input:checkbox', onCheckboxChange);

为什么能支持动态元素？ #

因为我们把监听器绑定在了不会被移除的父元素（比如document）上，所有子元素触发的事件都会通过事件冒泡传递到这个父元素。当新的checkbox被动态添加到页面后，它触发的change事件依然会冒泡到document，然后通过matches()判断是否是我们要处理的元素，所以新元素也能正常触发事件处理逻辑。

内容的提问来源于stack exchange，提问作者Ari Seyhun