Javascript 使用JS的事件委派

基于以下HTML标记：

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

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

但是我需要更改JS代码以使用事件委派，以便将eventListener添加到列表容器中，而不是添加到btn中

---

在jQuery中很容易，但是如何在vanilla JS中实现呢？

只需在

列表容器中添加一个侦听器，然后单击，查看
目标
是否与
匹配。btn
：


constdetailscocontainer=document.querySelector（'.details'）；
document.querySelector（'.list container'）.addEventListener（'click'，（{target}）=>{
if（target.matches（'.btn'））detailsContainer.classList.toggle（'visible'）；
});
.details{display:none}
.visible{display:block}
按钮外的容器
更多细节
Lorem ipsum Lorem ipsum Lorem ipsum
只需在
列表容器中添加一个侦听器，然后单击，检查
目标是否与
匹配


constdetailscocontainer=document.querySelector（'.details'）；
document.querySelector（'.list container'）.addEventListener（'click'，（{target}）=>{
if（target.matches（'.btn'））detailsContainer.classList.toggle（'visible'）；
});
.details{display:none}
.visible{display:block}
按钮外的容器
更多细节
Lorem ipsum Lorem ipsum Lorem ipsum
可能的重复感谢您的解决方案，但如果无序列表中有多个项目，此解决方案仅适用于第一个项目。@user1941537我不明白，HTML中没有列表（有序或无序），答案和你的问题都没有。。。？当然，如果HTML是不同的，Javascript也必须进行调整谢谢这个解决方案，但是如果无序列表中有多个项目，这个解决方案只适用于第一个项目。@user1941537我不明白，HTML中没有列表（有序或无序），答案和你的问题都没有。。。？当然，如果HTML不同，Javascript也必须进行调整
let btn = document.querySelector('.btn');
let detailsContainer = document.querySelector('.details');

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