求原生JavaScript等价于$(document).on('click','#myElement')的优雅写法

要实现和jQuery事件委托完全等价的原生JS代码，同时优化代码简洁性，这里有两种更优雅的写法，还能修复你原代码的潜在问题：

1. 基础优化版（匹配直接点击的元素） #

如果只需要响应直接点击#myElement本身的事件，可用Element.matches()方法简化选择器判断，代码更简洁且支持复杂CSS选择器：

document.addEventListener('click', function(e) {
  if (e.target.matches('#myElement')) {
    /* do something */
  }
});

matches()方法直接判断目标元素是否匹配指定CSS选择器，相比手动判断ID，扩展性更强——后续要改成类选择器'.my-class'或复合选择器'div#myElement.active'，直接修改字符串即可。

2. 完全等价jQuery版（支持子元素点击触发） #

你的原代码有个局限：如果点击#myElement内部的子元素，e.target会是子元素而非#myElement本身，这时候不会触发回调，但jQuery的on委托会正常触发（因为它会从触发元素向上遍历找匹配的元素）。要实现完全一致的行为，用Element.closest()方法：

document.addEventListener('click', function(e) {
  const matchedElement = e.target.closest('#myElement');
  if (matchedElement) {
    /* do something */
    // 这里可以用matchedElement代替jQuery中的this，比如修改元素样式、属性等
  }
});

closest()会从当前元素开始向上遍历DOM树，返回第一个匹配指定选择器的元素，找不到则返回null，完美复刻jQuery事件委托的逻辑。

关于“监听所有点击冗余”的说明 #

事件委托的核心就是利用事件冒泡，只在父级（这里是document）绑定一个监听器，这已经是支持动态元素的最优方案——动态添加的元素在绑定事件时还不存在，无法直接绑定事件。现代浏览器处理这种全局事件的开销极低，完全不需要担心性能问题。

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