$(document).on() 简单 JavaScript？

Question

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

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

这将侦听所有 DOM 元素上带有 class .foo 的点击事件。但是，这也会监听以后添加到 DOM 的任何最终元素，因此它不等于：

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

如何在普通 JavaScript 中执行此操作？我应该使用 MutationObserver 吗？如果是这样，那又如何呢？如果不是，那又怎样？

Answer 1

这称为事件委托，在纯粹的 javascript 中，您可以将点击事件附加到父元素，然后在点击时检查点击的元素是否与您要点击的目标匹配并执行您想要的操作，就像下面的例子：

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>

$(document).on() 简单 JavaScript？

$(document).on() in plain JavaScript?

javascript

jquery

dom

addeventlistener

mutation-observers