javascript - 普通JavaScript中的$(document).on()？

在jQuery中，有.on()可以用作:

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

这将监听所有带有.foo类的DOM元素上的点击事件。
但是，这还会监听以后添加到DOM中的所有最终元素，因此它不等于:

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

如何在普通JavaScript中做到这一点？我应该使用MutationObserver吗？如果是这样，那又如何？如果没有，那又如何呢？

最佳答案

这就是事件委托(delegate)，在纯JavaScript中，您可以将click事件附加到父元素，然后在单击时检查clicked元素是否与您要单击的目标匹配并执行所需的操作，如以下示例所示:

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("parent-item").innerHTML += "<li class='foo'>Item 3</li>";

document.getElementById("parent-item").addEventListener("click", function(e) {
  if(e.target && e.target.className == "foo") {
    console.log("foo "+e.target.innerText+" was clicked!");
  }
});

<ul id="parent-item">
  <li class='foo'>Item 1</li>
  <li class='foo'>Item 2</li>
</ul>