Delegation handles propagating events at an ancestor and finds the intended descendant. It helps dynamic lists avoid installing a handler on every row.
Step-by-step walkthrough
Step 1: Choose a delegation boundary
Put the listener on an ancestor that owns the relevant actions. The handler should decide which descendant action was intended rather than reacting to every click anywhere beneath the ancestor. This keeps independent nested widgets from sharing accidental behavior.
Step 2: Resolve the intended control
Event.target may be an icon or span inside a button. Closest locates the action control, and containment verifies that it belongs to the expected root. Also establish which events propagate appropriately and whether shadow boundaries change the target you observe.
Step 3: Preserve native interaction
Use real buttons or links so keyboard behavior and accessible names remain correct. Delegation changes listener ownership, not the semantic role of the interactive element. Remove the shared listener when its owner is destroyed if the ancestor itself remains alive.
Worked scenario
Use closest to find an action button when its nested icon receives the click; verify containment in the intended list.
const list = document.querySelector('#users');
function onClick(event) {
if (!(event.target instanceof Element)) return;
const button = event.target.closest('button[data-user-id]');
if (!button || !list.contains(button)) return;
console.log('Selected user', button.dataset.userId);
}
list.addEventListener('click', onClick);
// Owner teardown: list.removeEventListener('click', onClick);Walk through the example
The example assumes a browser document with an existing users element. Clicking text or an icon within the action button finds the same button. The containment check prevents using a matched ancestor outside the intended list. The ID still needs validation before it reaches an authorization-sensitive operation.
Common mistake
Event.target may be an inner element. Non-bubbling events and shadow-boundary retargeting need specific handling.
Verify the behavior
Click the button’s label and icon, dynamically add a new row and click an unrelated nested widget. Verify keyboard activation on the native button also reaches the intended action. Remove the listener and confirm no action occurs afterward.
Interview exercise
Avoid actions from an unrelated nested widget.
Answer and reasoning
Match a narrow action selector and enforce the delegation boundary instead of assuming every descendant click is a list action.
Follow-up discussion
Why not attach a listener to every row? That can be valid for a small list, but delegation can simplify dynamic ownership. Does every event bubble? No: choose an appropriate event or capture strategy deliberately rather than assuming all DOM events behave like click.
Continue learning
Compare the scenario with the JavaScript interview questions and test your understanding with the JavaScript MCQs. For terminology and implementation details, consult the reference material.