使用 vanilla 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 添加到 list-container 而不是 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>