Question

在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吗？如果是这样，那怎么样？如果没有，那么呢？

Answer 1

调用事件委托，在纯javascript中，您可以将click事件附加到父元素，然后单击检查单击的元素是否与要单击的目标匹配并执行所需的操作，如下例所示： / p>

if(clock_settime(CLOCK_REALTIME, &timeRT) != 0)
{
    std::cerr << "  Set clock_settime(CLOCK_REALTIME, &timeRT) = " << strerror(errno) << std::endl;
}

希望这有帮助。

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!");
  }
});

$（document）.on（）在纯JavaScript中？

1 个答案: