带有香草JS的活动代表团

Question

基于以下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添加到列表容器而不是btn.

它在jQuery中很容易,但我怎么能在vanilla JS中做到这一点？

Answer 1

只是一个监听器添加到.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>