原生JS实现动态生成HTML元素的事件委托捕获方案咨询

现有实现存在的问题 #

• document.getElementById() 传入的参数不需要加#前缀，该方法直接接收id的字符串值，应改为document.getElementById('item-wrapper')
• classList.contains() 传入的类名不需要加.前缀，应改为element.classList.contains('item')
• event.path 属于非标准属性，火狐浏览器需要用event.composedPath()获取，兼容性较差，不推荐生产环境使用

最优实现方案（等价jQuery的事件委托） #

你需要的就是标准的事件委托实现，原生DOM提供了Element.closest()方法，可以非常简便的实现需求：该方法会从触发事件的元素开始，向上遍历整个DOM树，返回第一个匹配指定选择器的元素，完全覆盖「点击.item内部任意区域都能匹配到对应.item」的场景。
正确代码如下：

// 绑定事件到父容器
document.getElementById('item-wrapper').addEventListener('click', event => {
  // 查找点击源最近的匹配.item选择器的元素
  const targetItem = event.target.closest('.item');
  if (targetItem) {
    // 此处写业务逻辑，targetItem就是被点击的.item元素
    console.log('点击的item元素：', targetItem);
  }
});

补充说明 #

• 你不需要开启事件捕获模式，事件默认的冒泡机制就可以满足需求：点击.item内部元素后，事件会逐层向上冒泡到父容器#item-wrapper，触发你绑定的监听函数。
• 如果需要兼容IE11及更早版本，可以自行实现closest方法的polyfill，逻辑和你原来的向上遍历祖先元素的思路一致，只是替换了非标准的event.path实现。

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