Делегирование событий с vanilla JS

На основе следующей разметки HTML:

<div class='list-container'>
  <button class="btn">More details </button>
</div>

<div class="details">Lorem ipsum lorem ipsum lorem ipsum</div>

Я написал следующий код JavaScript:

let btn = document.querySelector('.btn');
let detailsContainer = document.querySelector('.details');

btn.addEventListener('click', function(e) {
  e.preventDefault();
  detailsContainer.classList.toggle('visible');
});

Но мне нужно изменить код JS, чтобы использовать делегирование событий, чтобы eventListener добавлялся в list-container, а не в btn.

Это легко в jQuery, но как я могу сделать это в vanilla JS?


javascript events event-delegation
person user1941537    schedule 08.07.2018    source источник
comment
Возможный дубликат Делегирование события Vanilla JS - работа с дочерними элементами целевого элемента   -  person random_user_name    schedule 09.07.2018

Ответы (1)


arrow_upward
6
arrow_downward

Вместо этого просто добавьте прослушиватель к .list-container и при щелчке проверьте, соответствует ли target matches .btn:

const detailsContainer = document.querySelector('.details');
document.querySelector('.list-container').addEventListener('click', ({ target }) => {
  if (target.matches('.btn')) detailsContainer.classList.toggle('visible');
});
.details { display: none }
.visible { display: block }
<div class='list-container'>container outside of button
  <button class="btn">More details </button>
</div>

<div class="details">Lorem ipsum lorem ipsum lorem ipsum</div>

person CertainPerformance    schedule 08.07.2018
comment
Спасибо за решение, но если в вашем ненумерованном списке более одного элемента, это решение работает только для первого элемента. - person user1941537; 09.07.2018
comment
@user1941537 user1941537 Я не понимаю, в HTML нет списков (упорядоченных или неупорядоченных), ни в ответе, ни в вашем вопросе ...? Конечно, если HTML отличается, Javascript тоже придется подправить. - person CertainPerformance; 09.07.2018