<ul>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>var but = document.querySelectorAll('.list-group-item');
but.onclick = function() {
but.style.backgroundColor = 'red';
};
list-group-item:document.body.addEventListener('click', function(e) {
if( e.target.classList.contains('list-group-item'))
e.target.style.backgroundColor = 'red';
});<body> можно повесить слушателя ниже, например, на <ul>, чтобы ловить события только в его дочерних элементах (и глубже). <ul>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>let buttons = document.querySelectorAll('.list-group-item');
for (let button of buttons) {
button.onclick = function() {
button.style.backgroundColor = 'red';
}
}