$ (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>