Describe event delegation and implement a single ul click handler in TypeScript
WHAT IT TESTS: Event bubbling and parent-level listener efficiency. ANSWER OUTLINE: Add one listener to the ul, use event.target plus closest to find the li, and type it as MouseEvent. RED FLAG: Attaching listeners to each li or leaving event.target untyped.
WHAT IT TESTS: Your grasp of event bubbling and the performance benefit of a single parent listener versus hundreds on child nodes. ANSWER OUTLINE: First, explain that clicks on an li bubble up to the ul; second, add one typed click listener to the ul; third, use event.target with Element.closest to resolve the specific li; fourth, guard against clicks on the ul itself if needed. RED FLAG: Looping to attach listeners to every li, using event.target without verifying it is an li, or omitting TypeScript types.
Read the original → developer.mozilla.org
- #event delegation
- #typescript
- #dom events
- #event bubbling
- #web apis
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.