普通JavaScript中的$（document）.on（）？

在jQuery中，可以使用以下选项：

$(document).on('click', '.foo', function() { /* ... */ });

这将侦听类为

.foo

的所有DOM元素上的单击事件。 但是，这还会侦听以后添加到DOM的任何最终元素，因此它不等于：

var elements = document.getElementsByClassName('foo');
for (var element in elements) {
  element.addEventListener('click', function() { /* ... */ });
}

---

如何在纯JavaScript中实现这一点？我应该用一个电话吗？如果是，那怎么办？如果没有，那么什么？

称为事件委派，在纯javascript中，您可以将click事件附加到父元素，然后单击检查click元素是否与您要单击的目标匹配，并执行您想要的操作，如下面的示例所示：

document.getElementById("parent-item").addEventListener("click", function(e) {
      // e.target is the clicked element!
      // If it was an item with class 'foo'
      if(e.target && e.target.className == "foo") {
         console.log("foo "+e.target.innerText+" was clicked!");
    }
});

希望这有帮助

document.getElementById（“父项”）.innerHTML+=“
项3
”；
document.getElementById（“父项”）.addEventListener（“单击”，函数（e）{
if（e.target&&e.target.className==“foo”）{
log（“foo”+e.target.innerText+“被点击！”）；
}
});

项目1
项目2
不查看jquery源代码（即“纯JavaScript”），我怀疑它在
文档中添加了一个监听器
，然后使用sizzle检查事件源是否与选择器匹配。需要注意的一件有趣的事情是，通过事件委托，开发人员更难知道DOM元素与什么交互会触发事件，因为web浏览器中的开发人员工具在一条清晰的道路。当您直接侦听事件时，它会在DOM树检查器中显示该事件的图标。有趣的是，jQuery这样做的方式以某种方式绑定了每个元素，因此它们会显示在开发人员工具中。是的，这是真的Fred。如果答案是您想要的，请为未来的读者标记它为正确的，谢谢。我也有同样的问题，很好地使用了事件委派！