Mouse & Keyboard Events in JavaScript

JavaScript makes it easy to react to user interaction with the mouse and keyboard. These events allow dynamic behavior like dragging, shortcuts, or interactivity in games and UI.

🖱️ Mouse Events

• click – User clicks on an element
• dblclick – Double click
• mouseover / mouseout – Hover in/out
• mousedown / mouseup – Press/release mouse button
• mousemove – Mouse movement

document.getElementById("box").addEventListener("click", () => {
    alert("Box clicked!");
});

⌨️ Keyboard Events

• keydown – Key is pressed down
• keyup – Key is released
• keypress – (deprecated) Use keydown instead

document.addEventListener("keydown", function(event) {
    console.log("Key pressed:", event.key);
    if (event.key === "Enter") {
        alert("You pressed Enter!");
    }
});

📌 Accessing Event Data

document.addEventListener("click", function(e) {
    console.log("Mouse X:", e.clientX, "Mouse Y:", e.clientY);
});

🧪 Example With HTML

<input type="text" id="inputField" placeholder="Type something...">

<script>
document.getElementById("inputField").addEventListener("keyup", function(e) {
    console.log("You typed:", e.key);
});
</script>