Keyboard, Mouse & Form Events
Different interaction types trigger different events. Keyboard events for shortcuts and input, mouse events for interactions, and form events for data handling. Know which event to use for each scenario.
Event Types
- Keyboard - keydown (pressed), keyup (released). event.key = 'Enter', event.code = 'KeyA'
- Mouse - click, dblclick, mouseenter, mouseleave, mousemove, contextmenu (right-click)
- Form events - submit (form), input (live typing), change (value committed), focus, blur
- input vs change - input fires on every keystroke. change fires when user leaves the field or presses Enter
- Scroll - scroll event on window or scrollable element. Use for infinite scroll, back-to-top
- Resize - window resize event. Use for responsive JS logic
Events Code
// Keyboard events
// document.addEventListener("keydown", (e) => {
// console.log("Key:", e.key); // "Enter", "a", "Escape"
// console.log("Code:", e.code); // "Enter", "KeyA", "Escape"
// if (e.key === "Escape") console.log("Escape pressed!");
// if (e.ctrlKey && e.key === "s") {
// e.preventDefault();
// console.log("Ctrl+S intercepted - custom save!");
// }
// });
// Mouse events
// const card = document.querySelector(".card");
// card.addEventListener("mouseenter", () => card.classList.add("hover"));
// card.addEventListener("mouseleave", () => card.classList.remove("hover"));
// card.addEventListener("dblclick", () => console.log("Double clicked!"));
// Form events - live search
// const searchInput = document.querySelector("#search");
// searchInput.addEventListener("input", (e) => {
// const query = e.target.value.toLowerCase();
// console.log("Searching:", query);
// // Filter items based on query
// });
// Form submit
// const form = document.querySelector("#myForm");
// form.addEventListener("submit", (e) => {
// e.preventDefault();
// const formData = new FormData(form);
// const data = Object.fromEntries(formData);
// console.log("Form data:", data);
// });
// Focus/Blur
// input.addEventListener("focus", () => console.log("Input focused"));
// input.addEventListener("blur", () => console.log("Input lost focus"));
console.log("Keyboard, mouse, and form events demonstrated");Tip
Tip
Use 'input' event for real-time updates (search-as-you-type, live character counters). Use 'change' event for final values (form submission, dropdown selection). Use 'submit' on forms, not 'click' on submit buttons.
Fewer listeners = better perf. Works for dynamic elements.
Common Mistake
Warning
Listening for 'click' on a submit button instead of 'submit' on the form. Users can submit forms by pressing Enter, which triggers 'submit' but not the button 'click'. Always use form.addEventListener('submit', handler).
Practice Task
Note
Form events: (1) Build a live character counter that updates on every keystroke using 'input' event. (2) Add a dropdown that changes the page background on 'change' event. (3) Create a search filter that filters a list as the user types.
Quick Quiz
Key Takeaways
- Different interaction types trigger different events.
- Keyboard - keydown (pressed), keyup (released). event.key = 'Enter', event.code = 'KeyA'
- Mouse - click, dblclick, mouseenter, mouseleave, mousemove, contextmenu (right-click)
- Form events - submit (form), input (live typing), change (value committed), focus, blur