Lesson 50 - JavaScript Mouse Events

Mouse events are triggered when users interact with a webpage using a mouse or touchpad. These events allow us to create interactive web applications by responding to clicks, hovers, drags, and more.

Explanation

JavaScript provides several mouse events, including:

click – Fires when an element is clicked.
dblclick – Fires when an element is double-clicked.
mousedown – Fires when a mouse button is pressed.
mouseup – Fires when a mouse button is released.
mousemove – Fires when the mouse moves over an element.
mouseenter – Fires when the mouse enters an element (does not bubble).
mouseleave – Fires when the mouse leaves an element (does not bubble).
mouseover – Fires when the mouse enters an element (bubbles).
mouseout – Fires when the mouse leaves an element (bubbles).

Example 1: Click Event

Detect when a button is clicked and display a message.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Click Event</title>
</head>
<body>
    <button id="clickBtn">Click Me</button>
    <p id="message"></p>

    <script>
        document.getElementById("clickBtn").addEventListener("click", function() {
            document.getElementById("message").textContent = "Button clicked!";
        });
    </script>
</body>
</html>

When you click the button, a message appears below it.

Example 2: Mousemove Event

Track the mouse position and display the coordinates.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Move Event</title>
</head>
<body>
    <h2>Move your mouse around</h2>
    <p id="coords">Mouse Position: (0, 0)</p>

    <script>
        document.addEventListener("mousemove", function(event) {
            document.getElementById("coords").textContent = 
                `Mouse Position: (${event.clientX}, ${event.clientY})`;
        });
    </script>
</body>
</html>

Displays live mouse coordinates as you move the cursor.

Example 3: Hover Effect Using Mouseenter and Mouseleave

Change the background color of a box when hovered.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Enter and Leave</title>
    <style>
        #box {
            width: 200px;
            height: 100px;
            background-color: lightgray;
            text-align: center;
            line-height: 100px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="box">Hover over me</div>

    <script>
        let box = document.getElementById("box");

        box.addEventListener("mouseenter", function() {
            box.style.backgroundColor = "lightblue";
        });

        box.addEventListener("mouseleave", function() {
            box.style.backgroundColor = "lightgray";
        });
    </script>
</body>
</html>

Changes the background color when the mouse enters and leaves the box.

Try Your Hand

Steps:

Create a File:
- Name it lesson50-mouse-events.html.

Write the Code:

Copy the following:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Events</title>
</head>
<body>
<h2>Double Click the Button</h2>
<button id="dblClickBtn">Double Click Me</button>
<p id="status"></p>

<script>
   document.getElementById("dblClickBtn").addEventListener("dblclick", function() {
       document.getElementById("status").textContent = "Button was double-clicked!";
   });
</script>
</body>
</html>

Save the File.
Open it in a Browser to See the Double-Click Effect.

Experiment

Create an image that changes when clicked.
Show a tooltip when the mouse hovers over a button.
Create a simple drawing application using mousemove and mousedown.

Key Takeaways

JavaScript provides various mouse events like click, mouseover, mousemove, and mouseleave.
mouseenter and mouseleave do not bubble, while mouseover and mouseout do bubble.
Mouse events allow us to create dynamic and interactive webpages.

Javascript in 100 bits

Course by zooboole,

Last Updated on 2025-01-28 08:04:00