？

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事件附加到父元素，然后单击检查单击的元素是否与要单击的目标匹配并执行所需的操作，如下面的示例所示：

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>