使用 vanilla JS 的事件委托
Event delegation with 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 中做到这一点?
只需向 .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>
基于以下 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 中做到这一点?
只需向 .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>