A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
| Question to ask | Good diagnostic move |
|---|---|
| What value entered? | Inspect the runtime value and type. |
| What rule applied? | Check the construct's language or host semantics. |
| What changed? | Compare the smallest working and failing cases. |
<button id="buy">Buy</button><script>document.querySelector('#buy').addEventListener('click', () => {console.log('clicked');});</script>
<strong>Core idea:</strong> Browser JavaScript becomes practical when code starts reacting to real documents and real user actions. The DOM is a live object graph, not a string of HTML. In this lesson, the practical target is event bubbling, capturing, and delegation: you should be able to predict what the runtime will do before changing the code.
Mentor note: for event bubbling, capturing, and delegation, name the invariant you need before reaching for a clever shortcut. Clear state and explicit assumptions make later debugging much cheaper.
Finish the lesson once you have worked through the material. This awards ★ 20 XP.