Platform under construction

Events & Forms

Advanced

Mouse & Keyboard Events

Mouse, pointer and keyboard events let interfaces respond to different ways people interact.

window.addEventListener("keydown", event => {
  if (event.key === "Escape") closePanel();
});

Events & Forms

Interactive code should not assume every user has a mouse.

Mouse events such as click and mouseenter are common, but modern pointer events cover mouse, touch and pen input more broadly.

Keyboard events are essential for shortcuts, dismissing overlays and custom interactions. Use event.key for readable key checks.

Whenever possible, use native HTML controls first. A button already supports mouse, keyboard and accessibility behavior.

click

Device-independent activation for buttons and links.

pointer events

Unified pointer input for mouse, touch and pen.

keydown

React when a key is pressed.

event.key

Readable value such as Escape or Enter.

Examples

Event code should respect how people actually use the interface.

Use a button and listen for click

<button type="button" data-toggle>Toggle</button>

button.addEventListener("click", togglePanel);

Making a div behave like a button manually

<div data-toggle>Toggle</div>

// Now keyboard support, role and focus must be rebuilt.

Code patterns

Reusable examples for quick reference.

These examples are the event patterns you will reuse constantly: listen, inspect, prevent, delegate, validate and submit.

Escape key

Common pattern for closing UI.

window.addEventListener("keydown", event => {
  if (event.key === "Escape") closePanel();
});

Enter action

Use key checks carefully.

field.addEventListener("keydown", event => {
  if (event.key === "Enter") submitSearch();
});

Pointer position

Pointer events expose coordinates.

panel.addEventListener("pointermove", event => {
  panel.style.setProperty("--x", `${event.clientX}px`);
});

Prefer click for buttons

Native buttons already handle keyboard activation.

button.addEventListener("click", togglePanel);

Rules that matter

Make interaction predictable.

Events are user-facing code. Good handlers stay small, respect native behavior and keep visual, semantic and data state aligned.

Prefer semantic controls

Buttons and links provide built-in input support.

Use event.key

It is clearer than keyCode.

Support Escape thoughtfully

Users expect Escape to close temporary UI.

Do not trap keyboard users

Focus and shortcuts should remain predictable.

Use pointer events for broad pointer input

They work across more input devices.

Avoid hover-only behavior

Touch and keyboard users may never trigger it.

Production thinking

Strong event handling makes an interface feel reliable instead of accidental.

Why does this matter?

Good event handling makes the same interface usable with mouse, keyboard, touch and assistive tools.

Accessibility

Keyboard support is not optional for interactive controls.

Production note

Production UI should rely on semantic elements first and only add custom keyboard handling where necessary.

SEO note

Input events do not directly affect SEO, but usable navigation should not depend on hover-only scripts.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Change Escape to another key.
Move focus back to the button when closing.
Add pointermove and display the pointer coordinates.

Practice assignment

Do this before moving to the next topic.

Use a real button.
Listen for click.
Add one keyboard shortcut.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Mouse & Keyboard Events.