JavaScript Academy · Lesson

Keyboard and Mouse Events

Handle clicks, key presses, and pointer events.

Keyboard and Mouse Events is a free JavaScript Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Input Event Families

Mouse and keyboard events let you build rich interactions. Each family has specialized event types and properties.

The click Event

click fires on a primary press-and-release. It also fires for keyboard activation on buttons and links, making it accessible.

btn.addEventListener("click", () => {
  console.log("activated");
});

dblclick and contextmenu

dblclick fires on a double click, and contextmenu fires on right-click (often canceled to show a custom menu).

el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());

mousedown, mouseup, mousemove

These give fine-grained control: press, release, and movement. They are the building blocks for drag interactions.

box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));

mouseenter vs mouseover

mouseenter does not bubble and ignores child boundaries, while mouseover bubbles and fires when moving onto descendants. mouseenter is usually what you want for hover.

el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));

Which Mouse Button

The button property tells which button fired: 0 left, 1 middle, 2 right.

el.addEventListener("mousedown", (e) => {
  if (e.button === 2) console.log("right button");
});

keydown and keyup

keydown fires when a key goes down (and repeats while held); keyup fires on release. keypress is deprecated.

input.addEventListener("keydown", (e) => {
  console.log("down: " + e.key);
});

event.key

e.key is the logical value of the key: a character like "a" or a name like "Enter", "Escape", or "ArrowUp".

input.addEventListener("keydown", (e) => {
  if (e.key === "Escape") console.log("cancel");
});

event.code

e.code is the physical key location (like "KeyA" or "Space"), independent of keyboard layout. Use it for game controls.

window.addEventListener("keydown", (e) => {
  if (e.code === "Space") console.log("jump");
});

Keyboard Shortcuts

Combine modifier flags with key to detect shortcuts, and call preventDefault to override the browser default.

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    console.log("save");
  }
});

repeat for Held Keys

e.repeat is true when a keydown is firing because the key is being held, letting you ignore auto-repeats.

window.addEventListener("keydown", (e) => {
  if (e.repeat) return;
  console.log("first press of " + e.key);
});

Quick Check

Pick the layout-independent property.

Recap

Mouse events include click, dblclick, mousedown/mouseup/mousemove, and the hover-friendly mouseenter/mouseleave; button identifies which button. Keyboard events use keydown/keyup, with e.key for the character/name, e.code for the physical key, and e.repeat for held keys.

Frequently asked questions

Is the “Keyboard and Mouse Events” lesson free?

Yes — the full text of “Keyboard and Mouse Events” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Keyboard and Mouse Events”?

Handle clicks, key presses, and pointer events. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Keyboard and Mouse Events” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy