Event Playground

Open the Console (Cmd/Ctrl + Shift + J). Every section prints what it hears.

1. Many events, one box

Hover, leave, and click the box. Watch the Console and the color.

hover / click me

2. The event object (mouse position)

Move your mouse over this section.

x: —, y: —

3. Keyboard events

Click into the field and type. Try the arrow keys and Enter.

last key: —

4. Live input & a form that doesn't reload

Type to see live echo. Press the button to "submit" without a page reload.

live: —
submitted: —

5. Event delegation

One listener on the container handles every button — including ones added after load. Click a name to remove it; add more with the button.