Focus, blur and focusin on a real form
Click into a field, then press Tab and Shift+Tab. Leaving a field empty turns it red. relatedTarget names the field focus came from.
Pointer events (pointerdown, pointerup, click, dblclick) cover mouse, touch and pen; keyboard events (keydown, keyup) give you key (the character meant) and code (the physical key); and focus events (focus, blur, focusin, focusout) tell you which element will receive typing.
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.
Make arrow keys move a 30 px square #player 10 px at a time (left and right), using transform. Test with two dispatched ArrowRight presses and log the position.
Show a #tip paragraph while a <input id="pwd"> has focus, and hide it when focus leaves.
Explain it without notes
What is the difference between event.key and event.code? When would you use each?
Why are pointer events preferred over mouse and touch events?
What is the difference between focus/blur and focusin/focusout?
Which events fire, in order, when a user double-clicks a button?
Preview
Console
Nothing logged yet.