如何将jQuery事件委托代码转换为原生JavaScript实现？

你的问题出在对原生addEventListener参数的理解上——它的第三个参数不是选择器，而是控制事件捕获/冒泡的配置项（布尔值或对象），所以你之前的写法会直接监听父元素的点击，完全没做目标元素的匹配判断。

要实现和jQueryon()方法一致的事件委托（支持动态新增元素），核心是利用事件冒泡，在父元素的回调里手动校验触发事件的目标元素是否符合指定选择器，具体实现如下：

document.querySelector("#maDIV").addEventListener("click", event => {
  // 检查触发事件的元素是否匹配目标选择器
  if (event.target.matches("[data-action='supprimer']")) {
    console.log("on clique evt");
    // 这里写你的业务逻辑
  }
});

关键说明： #

• event.target：指实际被点击的元素（如果需要精确匹配直接子元素，可结合event.currentTarget.contains(event.target)和选择器查询判断，大部分场景下matches足够）
• Element.matches(selector)：用来判断当前元素是否匹配指定的CSS选择器，和jQuery的选择器匹配逻辑完全对应
• 这种方式天然支持动态新增的子元素，因为事件监听绑定在父元素上，新增元素只要符合选择器，点击时事件冒泡到父元素就会被校验触发

原jQuery代码的本质也是基于事件冒泡实现的委托，上面的原生写法和它的逻辑完全一致，只是需要手动完成选择器匹配的步骤。

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