javascript / intermediate
Snippet
Effiziente Event-Delegation
Anstatt jedem Button einen Listener hinzuzufügen, hängen Sie einen Listener an das Elternelement an. Dies verbessert die Leistung und verarbeitet dynamisch hinzugefügte Elemente.
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
Erklärung
1
list.addEventListener('click', (event) => {
Fügt dem übergeordneten Container einen einzigen Event-Listener hinzu.
2
event.target.dataset.id;
Greift auf benutzerdefinierte Datenattribute des spezifischen Elements zu, das das Ereignis ausgelöst hat.