Keyboard and Mouse Events
Handle clicks, key presses, and pointer events.
Keyboard and Mouse Events is a free JavaScript Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.
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.
Learn JavaScript with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 59
- Lessons
- 200
Frequently Asked Questions
Is the “Keyboard and Mouse Events” lesson free?
Yes — any 3 lessons of the JavaScript Academy learning path, including “Keyboard and Mouse Events”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
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
- addEventListener Basics
- The Event Object
- preventDefault and stopPropagation
- Keyboard and Mouse Events