Premium

Delegated Event Handler (M)

By FrontendAtlas Team · Updated Jan 31, 2026

Implement delegate(root, eventType, selector, handler, options?) with advanced event delegation. Requirements: 1) Attach one event listener to root. 2) When an event fires, find the closest ancestor of event.target (including itself) that matches selector. 3) Only call handler(event, matchedElement) if the match is within root.…

What you’ll build / What this tests

This premium javascript coding focuses on Delegated Event Handler (M). You’ll apply dom and events thinking with intermediate level constraints. The prompt emphasizes Implement delegate(root, eventType, selector, handler, options?) with advanced event delegation. Requirements: 1) Attach one event listener….

Learning goals

Translate the prompt into a clear javascript API signature and return shape.
Apply dom, events, event-delegation techniques to implement delegated event handler (m).
Handle intermediate edge cases without sacrificing readability.
Reason about time/space complexity and trade-offs in javascript.

Key decisions to discuss

Define the exact input/output contract before coding.
Choose iteration vs higher-order methods for readability.
Prioritize predictable edge-case handling over micro-optimizations.

Evaluation rubric

Correctness: covers required behaviors and edge cases.
Clarity: readable structure and predictable control flow.
Complexity: avoids unnecessary work for large inputs.
API discipline: no mutation of inputs; returns expected shape.
Testability: solution is easy to unit test.

Constraints / Requirements

Preserve input order and handle empty arrays safely.
Do not access the real DOM; use the provided node shape.
Handle empty or missing inputs without throwing errors.
Keep runtime close to linear time where possible.
Prefer a pure function: no side effects beyond the return value.

Mini snippet (usage only)

// Example usage
const root = /* delegated event handler (m) input */;
const eventType = /* config */;
const result = delegate(root, eventType);
console.log(result);

// Edge case check
const empty = root && eventType ?? null;
const fallback = delegate(root, eventType);
console.log(fallback);

// Expected: describe output shape, not the implementation
// (no solution code in preview)

Common pitfalls

Mutating inputs instead of returning a new value.
Skipping edge cases like empty input, duplicates, or nulls.
Overlooking time complexity for large inputs.