Mouse, Keyboard, and Form Events

Objectives

By the end of this chapter, you should be able to:

• Respond to mouse events like mouseover and mouseout
• Respond to keyboard events and read which key was pressed
• Handle a form’s submit event and stop the page from reloading

💡 Why this matters: These are the handful of events you’ll reach for constantly: hovering, typing, and submitting are how most user interaction actually happens.

Mouse Events: mouseover and mouseout

mouseover fires when the pointer enters an element. mouseout fires when it leaves.

Given this HTML:

<div id="box">Hover me</div>

const box = document.getElementById("box");

box.addEventListener("mouseover", () => {
  box.style.backgroundColor = "yellow";
});

box.addEventListener("mouseout", () => {
  box.style.backgroundColor = "";
});

Moving the mouse onto #box turns it yellow, moving off clears the color again. dblclick works the same way as click, just for a double-click instead of a single one.

Keyboard Events: keydown and event.key

keydown fires while a key is pressed, on whichever element has focus (or on document to catch it anywhere on the page).

Given this HTML:

<input id="search" type="text">

const search = document.getElementById("search");

search.addEventListener("keydown", (event) => {
  console.log(event.key);
});

Typing a logs "a". Pressing Enter logs "Enter", pressing Escape logs "Escape". event.key gives you the actual key as a readable string, which makes it easy to check for a specific one:

search.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    console.log("Search submitted:", search.value);
  }
});

This pattern, checking event.key inside a keydown listener, is how you’d build something like “press Enter to search” without a submit button.

Form Events: submit

Given this HTML:

<form id="signupForm">
  <input type="email" name="email">
  <button type="submit">Sign up</button>
</form>

By default, submitting a form (clicking its submit button, or pressing Enter inside one of its fields) reloads the page and sends the data to whatever URL is in the form’s action attribute. In a JavaScript-driven page, you almost always want to stop that and handle the data yourself.

const form = document.getElementById("signupForm");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const email = form.elements["email"].value;
  console.log("Signing up:", email);
});

event.preventDefault() stops the browser’s default behavior for that event, here, the page reload. It’s available on most events that have a default action (form submission, clicking a link, and so on), not just submit. Without it, your handler would still run, but the page would reload immediately after, losing whatever you just did.

Try It

Starter HTML for all four exercises:

<div id="hoverBox">Hover me</div>
<input id="nameInput" type="text">
<form id="loginForm">
  <input type="text" name="username">
  <button type="submit">Log in</button>
</form>

1. Add mouseover and mouseout listeners to #hoverBox that log "entered" and "left".
2. Add a keydown listener to #nameInput that logs event.key every time a key is pressed.
3. Inside that same listener, check if event.key === "Enter" and log "Submitted" only when it is.
4. Add a submit listener to #loginForm that calls event.preventDefault() and logs the value of the username field.

Recap

• mouseover fires when the pointer enters an element, mouseout when it leaves.
• keydown fires on key presses. event.key gives you the actual key pressed as a string, useful for checking things like event.key === "Enter".
• The submit event fires when a form is submitted. event.preventDefault() stops the browser’s default reload-and-send behavior so you can handle the data in JavaScript instead.

Next lesson: what order events actually fire in when elements are nested inside each other.