Per-item listeners miss new items
blue was added after the loop ran, so it never got its own listener. Only the delegated listener heard it.
Event delegation means putting one listener on a parent instead of one on every child: because events bubble, the parent hears every child's event, uses event.target.closest() to find which child it was, and automatically handles children added later.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Given <div id="tabs"><button data-tab="home">Home</button><button data-tab="news">News</button></div>, write one listener that logs open home or open news. Click News from code.
Write a delegated listener on a <table id="grid"> that logs the text of the row (<tr>) whose cell was clicked, and ignores clicks on the <thead>.
Explain it without notes
What is event delegation and why does it work?
Why do you need closest in a delegated listener?
What are the advantages and limits of delegation?
Preview
Console
Nothing logged yet.Expected console output
per-item: red
delegated: red
delegated: blue