Delegating focus with focusin
The script fires the events itself so the output is the same every time. Click into the boxes yourself: the label of the focused box turns blue, all from two listeners on the form.
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
focusin from name
focusout from name