254
event delegation
also bubbling, capturing
One listener on a parent handles events from the children. stopPropagation cuts that off.
What is event delegation?
Most DOM events bubble from the target to the root. A parent listener can handle clicks for children added later, which is event delegation. Capturing runs on the way down. stopPropagation hides the event from ancestors. React’s onClick on a component is already attached high in the tree. A hand-built list of nodes is not.
Why does event delegation matter when vibe coding?
The draft adds a listener per row inside a loop and never removes it. Or it calls stopPropagation on every click and a parent handler the dialog needed never runs.
How do you do event delegation?
Listen on the stable parent for lists you manage yourself. Remove listeners on teardown. Call stopPropagation only when an ancestor must not see that event, and name that ancestor.
How do you ask a model for event delegation?
Handle clicks for (list) with one listener on the parent. Read the target. Remove the listener when the parent goes away. Do not add a listener per row. Do not call stopPropagation unless (ancestor) must ignore the event.
What goes wrong with event delegation?
Delegating a focus or blur event and forgetting they do not bubble. Use focusin and focusout.