Mouse and pointer event properties
The script builds the events itself with exact values, so the output never changes. Real events from your mouse carry the same properties with real values.
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.Expected console output
pointerdown | type: pen | button: 0 | at 40 25
click | detail: 1 | shift held: true
click | detail: 2 | shift held: false
dblclick | detail: 2
contextmenu | button: 2