jQuery & DOM Manipulation

Keyboard & Mouse Events

15 min Lesson 20 of 30

Mastering Keyboard and Mouse Events

Keyboard and mouse events allow you to create rich, interactive experiences. Understanding these events is essential for building games, custom controls, and advanced user interfaces.

Keyboard Events Overview

keydown: Fired when a key is pressed down
keyup: Fired when a key is released
keypress: Deprecated - use keydown instead

Basic Keyboard Event Example

Detecting Key Presses:

<input type="text" id="searchBox" placeholder="Type to search...">
<div id="keyInfo"></div>

<script>
$("#searchBox").on("keydown", function(event) {
    let key = event.key;
    let keyCode = event.keyCode;

    $("#keyInfo").html(
        "Key: <strong>" + key + "</strong><br>" +
        "KeyCode: <strong>" + keyCode + "</strong>"
    );
});
</script>

The Event Object Properties

The event object provides useful information about the keyboard event:

Event Object Properties:

$(document).on("keydown", function(event) {
    console.log("Key:", event.key);           // The actual key (e.g., "a", "Enter")
    console.log("Key Code:", event.keyCode);  // Numeric code (deprecated)
    console.log("Code:", event.code);         // Physical key code (e.g., "KeyA")
    console.log("Shift:", event.shiftKey);    // true if Shift is pressed
    console.log("Ctrl:", event.ctrlKey);      // true if Ctrl is pressed
    console.log("Alt:", event.altKey);        // true if Alt is pressed
    console.log("Meta:", event.metaKey);      // true if Cmd/Windows key is pressed
});

Detecting Specific Keys

Enter Key Detection:

<input type="text" id="chatInput" placeholder="Type message and press Enter">
<div id="chatMessages"></div>

<script>
$("#chatInput").on("keydown", function(event) {
    if (event.key === "Enter" || event.keyCode === 13) {
        event.preventDefault();

        let message = $(this).val();
        if (message.trim() !== "") {
            $("#chatMessages").append("<p>" + message + "</p>");
            $(this).val(""); // Clear input
        }
    }
});
</script>

Arrow Keys Navigation:

<div id="player" style="position:relative; width:50px; height:50px;
     background:var(--primary); left:0; top:0;"></div>

<script>
let position = { x: 0, y: 0 };
const step = 10;

$(document).on("keydown", function(event) {
    switch(event.key) {
        case "ArrowUp":
            position.y -= step;
            break;
        case "ArrowDown":
            position.y += step;
            break;
        case "ArrowLeft":
            position.x -= step;
            break;
        case "ArrowRight":
            position.x += step;
            break;
        default:
            return; // Exit if not arrow key
    }

    event.preventDefault(); // Prevent page scrolling

    $("#player").css({
        left: position.x + "px",
        top: position.y + "px"
    });
});
</script>

Keyboard Shortcuts

Creating Keyboard Shortcuts:

$(document).on("keydown", function(event) {
    // Ctrl+S or Cmd+S to save
    if ((event.ctrlKey || event.metaKey) && event.key === "s") {
        event.preventDefault();
        alert("Save shortcut triggered!");
        // Perform save operation
    }

    // Ctrl+Z or Cmd+Z to undo
    if ((event.ctrlKey || event.metaKey) && event.key === "z") {
        event.preventDefault();
        alert("Undo shortcut triggered!");
        // Perform undo operation
    }

    // Escape key to close modal
    if (event.key === "Escape") {
        $(".modal").hide();
    }
});
</script>

Cross-Platform Tip: Use (event.ctrlKey || event.metaKey) to support both Windows/Linux (Ctrl) and Mac (Cmd) shortcuts.

Mouse Events Overview

click: Left mouse button click
dblclick: Double click
mousedown: Mouse button pressed
mouseup: Mouse button released
mouseenter: Mouse enters element
mouseleave: Mouse leaves element
mousemove: Mouse moves within element
contextmenu: Right-click context menu

Mouse Position Tracking

Tracking Mouse Coordinates:

<div id="canvas" style="width:400px; height:300px;
     background:var(--bg-light); position:relative;">
    <div id="coordinates"></div>
</div>

<script>
$("#canvas").on("mousemove", function(event) {
    // Relative to element
    let x = event.offsetX;
    let y = event.offsetY;

    // Relative to page
    let pageX = event.pageX;
    let pageY = event.pageY;

    // Relative to viewport
    let clientX = event.clientX;
    let clientY = event.clientY;

    $("#coordinates").html(
        "Element: (" + x + ", " + y + ")<br>" +
        "Page: (" + pageX + ", " + pageY + ")<br>" +
        "Viewport: (" + clientX + ", " + clientY + ")"
    );
});
</script>

Mouse Button Detection

Detecting Which Button Was Clicked:

<div id="clickArea" style="width:300px; height:200px;
     background:var(--bg-light);">
    Click with different mouse buttons
</div>
<div id="buttonInfo"></div>

<script>
$("#clickArea").on("mousedown", function(event) {
    let button;

    switch(event.which) {
        case 1:
            button = "Left Button";
            break;
        case 2:
            button = "Middle Button";
            break;
        case 3:
            button = "Right Button";
            break;
    }

    $("#buttonInfo").text(button + " clicked");
});

// Prevent context menu on right click
$("#clickArea").on("contextmenu", function(event) {
    event.preventDefault();
});
</script>

Drag and Drop Implementation

Custom Drag and Drop:

<div id="draggable" style="width:100px; height:100px;
     background:var(--primary); position:absolute; cursor:move;">
    Drag Me
</div>

<script>
let isDragging = false;
let currentElement = null;
let offset = { x: 0, y: 0 };

$("#draggable").on("mousedown", function(event) {
    isDragging = true;
    currentElement = $(this);

    // Calculate offset from mouse to element top-left
    offset.x = event.pageX - currentElement.offset().left;
    offset.y = event.pageY - currentElement.offset().top;

    currentElement.css("opacity", "0.7");
});

$(document).on("mousemove", function(event) {
    if (isDragging && currentElement) {
        // Update element position
        currentElement.css({
            left: event.pageX - offset.x + "px",
            top: event.pageY - offset.y + "px"
        });
    }
});

$(document).on("mouseup", function() {
    if (isDragging) {
        isDragging = false;
        if (currentElement) {
            currentElement.css("opacity", "1");
            currentElement = null;
        }
    }
});
</script>

Hover Effects with Mouse Position

Interactive Hover Effect:

<div id="hoverBox" style="width:300px; height:300px;
     background:var(--bg-light); position:relative; overflow:hidden;">
    <div id="spotlight" style="width:100px; height:100px;
         background:var(--primary); border-radius:50%;
         position:absolute; pointer-events:none; opacity:0.3;"></div>
</div>

<script>
$("#hoverBox").on("mousemove", function(event) {
    let x = event.offsetX - 50; // Center the spotlight
    let y = event.offsetY - 50;

    $("#spotlight").css({
        left: x + "px",
        top: y + "px"
    });
}).on("mouseenter", function() {
    $("#spotlight").show();
}).on("mouseleave", function() {
    $("#spotlight").hide();
});
</script>

Preventing Default Behaviors

Custom Context Menu:

<div id="contentArea" style="width:400px; height:300px;
     background:var(--bg-light);">
    Right-click for custom menu
</div>

<div id="customMenu" style="display:none; position:absolute;
     background:white; border:1px solid #ddd; padding:10px;">
    <div class="menu-item">Copy</div>
    <div class="menu-item">Paste</div>
    <div class="menu-item">Delete</div>
</div>

<script>
$("#contentArea").on("contextmenu", function(event) {
    event.preventDefault();

    // Position and show custom menu
    $("#customMenu").css({
        left: event.pageX + "px",
        top: event.pageY + "px",
        display: "block"
    });
});

// Hide menu when clicking elsewhere
$(document).on("click", function() {
    $("#customMenu").hide();
});

// Handle menu item clicks
$(".menu-item").on("click", function(event) {
    event.stopPropagation();
    alert($(this).text() + " clicked");
    $("#customMenu").hide();
});
</script>

Performance Warning: Be careful with mousemove events as they fire very frequently. Use throttling or debouncing for expensive operations.

Practical Example: Drawing Canvas

Simple Drawing Application:

<canvas id="drawingCanvas" width="500" height="400"
        style="border:2px solid var(--primary);"></canvas>
<br>
<button id="clearCanvas">Clear</button>
<input type="color" id="colorPicker" value="#000000">
<input type="range" id="brushSize" min="1" max="20" value="5">

<script>
let canvas = document.getElementById("drawingCanvas");
let ctx = canvas.getContext("2d");
let isDrawing = false;
let brushColor = "#000000";
let brushSize = 5;

$("#drawingCanvas").on("mousedown", function(event) {
    isDrawing = true;
    ctx.beginPath();
    ctx.moveTo(event.offsetX, event.offsetY);
});

$("#drawingCanvas").on("mousemove", function(event) {
    if (isDrawing) {
        ctx.lineTo(event.offsetX, event.offsetY);
        ctx.strokeStyle = brushColor;
        ctx.lineWidth = brushSize;
        ctx.lineCap = "round";
        ctx.stroke();
    }
});

$("#drawingCanvas").on("mouseup mouseleave", function() {
    isDrawing = false;
});

$("#clearCanvas").on("click", function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

$("#colorPicker").on("change", function() {
    brushColor = $(this).val();
});

$("#brushSize").on("input", function() {
    brushSize = $(this).val();
});
</script>

Combining Keyboard and Mouse Events

Multi-Selection with Ctrl/Cmd Key:

<div class="item-list">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>

<script>
$(".item").on("click", function(event) {
    // Multi-select with Ctrl/Cmd
    if (event.ctrlKey || event.metaKey) {
        $(this).toggleClass("selected");
    } else {
        // Single select
        $(".item").removeClass("selected");
        $(this).addClass("selected");
    }
});

// Delete selected items with Delete key
$(document).on("keydown", function(event) {
    if (event.key === "Delete") {
        $(".item.selected").remove();
    }
});
</script>

<style>
.item {
    padding: 10px;
    margin: 5px;
    background: var(--bg-light);
    cursor: pointer;
}
.item.selected {
    background: var(--primary);
    color: white;
}
</style>

Practice Exercise:

Task: Create an interactive game or application with these features:

A player character that moves with WASD or Arrow keys
Track and display the mouse position on screen
Click to spawn objects at mouse position
Press Space to clear all spawned objects
Right-click to change the spawn color
Use Ctrl+Click for a special action
Display a score counter

Bonus: Add collision detection between player and spawned objects. Implement smooth movement with velocity.

Key Takeaways

Use event.key for keyboard events (not deprecated keyCode)
event.preventDefault() stops default behavior
Mouse event properties: offsetX/Y, pageX/Y, clientX/Y
event.which or event.button detects mouse button
Throttle/debounce high-frequency events like mousemove
Combine keyboard modifiers with mouse events for advanced interactions