Intermediatenote 03 of 0803 reasons · 03 notes
JavaScriptIntermediate
Prefer delegated events for repeated UI
Attach one listener to a parent when many repeated children share the same behavior.
Code example
Copy, adapt, and ship.
Read the numbered lines, copy the complete snippet, then adjust the values for your project.
document.querySelector("[data-actions]").addEventListener("click", (event) => { const button = event.target.closest("[data-action]"); if (!button) return; runAction(button.dataset.action);});Why this matters
The production reason.
- 01
A grid with hundreds of buttons does not need hundreds of event listeners when the behavior is shared.
- 02
Event delegation lets a parent listen once and inspect which child triggered the event.
- 03
This is useful for tables, menus, generated lists, and CMS-rendered content.
How it holds up outside a demo.
- JavaScriptUse closest() to find the actionable child.
- WordPressHelpful when markup comes from blocks or shortcodes.
- ReactUsually use component handlers, but delegation still helps for raw HTML islands.
Explore other stacks
Jump into a different technology.
08 JavaScript notes on this shelf, and six more stacks beside it.
Use next/image for image optimization
Next.js image optimization starts with next/image sizing, lazy loading, modern formats, and predictable dimensions.
Open the noteKeep state close to the interaction
Local state avoids unnecessary parent renders and keeps component intent obvious.
Open the noteBuild a CSS gradient generator with code export
A CSS gradient generator should preview color stops, preserve accessible contrast, and export clean CSS code.
Open the noteFix WordPress H1 SEO issues
Fix WordPress SEO issues by keeping one clear H1, escaping template output, and compressing images before WordPress upload.
Open the noteReduce LCP with image optimization
Reduce LCP with image optimization by resizing, converting, and compressing images before they reach production.
Open the noteUse real buttons for actions
If it changes state, use button. If it navigates, use a link.
Open the note