$(document).on()在纯JavaScript中？

Question

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

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

这将侦听具有该类的所有DOM元素上的单击事件.foo.但是,这也会监听稍后添加到DOM的任何最终元素,因此它不等于:

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

我如何在纯JavaScript中执行此操作？我应该使用MutationObserver吗？如果是这样,那怎么样？如果没有,那又怎样？

Answer 1

这称为事件委托,在纯javascript中,您可以将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("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>