$（document）.on（）のプレーンJavaScript？ jQueryので

Question

として使用することができます.on()があります：これはクラス.fooを持つすべてのDOM要素のクリックイベントをリッスン

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

が。それが等しくないので はしかし、これはまた、後に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>