javascript / intermediate
Snippet
Efficient Event Delegation
Instead of adding listeners to every button, attach one listener to the parent. This improves performance and handles dynamically added elements.
snippet.js
javascript
1
2
3
4
5
6
7
8
const list = document.querySelector('#item-list');list.addEventListener('click', (event) => {if (event.target.tagName === 'BUTTON') {const id = event.target.dataset.id;handleAction(id);}});
nextjs
Breakdown
1
list.addEventListener('click', (event) => {
Attaches a single event listener to the parent container.
2
event.target.dataset.id;
Accesses custom data attributes from the specific element that triggered the event.