14 / 17

Write a delegated event helper: on(root, selector, type, handler).

MediumP2Coding

Write an event delegation helper:

const off = on(root, selector, type, handler);

It adds one listener to root for events of type. When an event comes from inside an element matching selector (the target itself or a descendant of it), call handler with the event and the matched element. It returns a function that removes the listener.

Build a small demo page around it: a list whose items are added and removed at run time, with a click counter that proves new items work without re-attaching anything.

Time box: 30 to 40 minutes.

Requirements

0 / 7

on(root, selector, type, handler) attaches exactly one listener to root, whatever the number of matching elements
The matched element is found with event.target.closest(selector), so a click on a child of a matching element still matches
Matches outside root are ignored: closest can climb past root, so check root.contains(match)
handler is called as handler.call(match, event, match): the matched element is both this and the second argument
Items added after on was called work without any new setup
The returned function removes the listener, and calling it twice is harmless
focus and blur do not bubble, so the helper listens in the capture phase for those types

Stretch goals

0 / 3

Only after every requirement works.

Support mouseenter and mouseleave by delegating mouseover and mouseout and comparing relatedTarget
Accept an options object (once, capture, signal) and abort with an AbortSignal
Write the helper in TypeScript with the handler typed from the event name

Hints

Workspace

Your files are saved in this browser as you type.

When every requirement works, mark it complete to count it as solved.

Solution notes

How a strong candidate structures it, and what interviewers check.

Your notesSaved automatically