Event Playground

1. Many events, one box

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

hover / click me

2. The event object (mouse position)

Move your mouse anywhere on the page.

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.

6. Stopping propagation

Click the card to open it. Click the × to close it. Then comment out the stopPropagation() line and try the × again.

Click to open

Here are the hidden details. The × in the corner closes the card.