Different JavaScript Mouse Events [In-Depth Tutorial]

In JavaScript | Tags: #javascript
Different JavaScript Mouse Events [In-Depth Tutorial]

Introduction

Interactivity and event-based actions are what make website come to live, and all of these is done with JavaScript. The JavaScript language is a high-level, dynamic, and interpreted programming language. But more importantly, it is widely used to develop interactive and responsive web applications. JavaScript allows developers to perform various actions based on user interactions, including mouse events.

In this article, we discuss events, event handlers, and more specifically different mouse events in JavaScript.

Events and Event Handlers in JavaScript

In JavaScript, an event is an action that occurs in the browser, such as a mouse click, page load, or form submission. An event handler is a function that runs when the event is triggered. Event handlers can be added to an element using the addEventListener() method or using an HTML attribute.

The basic syntax for adding an event with the addEventListener() method can be seen below

addEventListener(type, listener)

Where the type indicates the event we want to apply and the listener is the object that is triggered when the event we specified occurs.

Now with this, let’s get into different mouse events in JavaScript, from click to mouseup.

Different Mouse Events in JavaScript

There are several mouse events in JavaScript that can be used to respond to user interactions. These events allow developers to perform specific actions based on the position of the mouse, the type of mouse button used, or the number of clicks.

The click event in JavaScript

The click event is fired when a mouse button is clicked on an element. It can be used to respond to single clicks or to perform actions when an element is clicked. The click event is one of the most commonly used mouse events in JavaScript. We can use this event to perform an action when a user clicks a button, such as submitting a form.

To illustrate the click event and other events within this article, we will create an HTML page with a h1 heading, p, div and button element. For the click event example, we will change the color of the div section which will initially hold a cadetblue background color to green based on a click event.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>JavaScript Mouse Event</title>
        <style>
            #box {
                width: 200px;
                height: 200px;
                background-color: cadetblue;
                margin: 0 20px 20px 0;
            }
        </style>
    </head>
    <body>
        <h1>Understanding JavaScript Mouse Events</h1>
        <p>
            Mouse Events are interesting to work with in JavaScript because it
            allows to create unique experience using the device - mouse - that
            most desktop users interact with websites with
        </p>
        <div id="box"></div>
        <button id="button">Click Here for Some Action</button>
    </body>
    <script src="script.js"></script>
</html>

The script.js file.

let box = document.getElementById("box");
let button = document.getElementById("button");

button.addEventListener("click", function () {
    box.style.backgroundColor = "green";
});

Output

The code first selects the div and button via their identifiers, and adds an event listener using the addEventListener() method. Inside the addEventListener() method, we pass an anonymous that changes the background color by applying the backgroundColor property.

The dblclick event in JavaScript

The dblclick event is fired when a mouse button is double-clicked on an element. It is used to perform specific actions when an element is double-clicked. For example, a dblclick event can be used to edit the content of an element when it is double-clicked. This event can be used to perform an action when a user double-clicks an element, such as opening a new window.

To illustrate the dlclick event, we will modify the previous event to work by double clicking the box itself to change its color to green. The script.js file will contain the following code.

let box = document.getElementById("box");

box.addEventListener("dblclick", function () {
    box.style.backgroundColor = "green";
});

Output

The code retrieves the div element with the box identifier and then applies the dblclick event type with the function to change the background color to green.

The mouseup event in JavaScript

The mouseup event is fired when a mouse button is released after clicking on an element. It can be used to perform actions when the mouse button is released. This event can be used to perform an action when a mouse button is released, such as stopping an object from moving.

To illustrate this, we will change the div box to red by executing a mouseup event. We will retrieve the div box using the getElementById() method and then add a addEventListener() method with an anonymous function to change the backgrounColor property to red.

let box = document.getElementById("box");

box.addEventListener("mouseup", function () {
    box.style.backgroundColor = "red";
});

Output

The mousedown event in JavaScript

Similarly but in an opposite mouse direction, the mousedown event is fired when a mouse button is pressed down on an element. It can be used to perform actions when the mouse button is pressed. For example, a mousedown event can be used to start dragging an object on the screen.

We will execute the same actions as the previous section using the mousedown event.

let box = document.getElementById("box");

box.addEventListener("mousedown", function () {
    box.style.backgroundColor = "red";
});

Output

The mouseover and mouseenter event in JavaScript

The mouseover event is fired when the mouse pointer enters an element. It can be used to perform actions when the mouse pointer enters an element. For example, a mouseover event can be used to display a tooltip when the mouse pointer is over an element.

To illustrate the mouseover event, we will increase the box width and height when we hover our mouse over it. For us to achieve this, we will simply select the div that holds the box via its identifier and the getElementById() method and apply the relevant new properties.

let box = document.getElementById("box");

box.addEventListener("mouseover", function () {
    box.style.backgroundColor = "red";
    box.style.width = "250px";
    box.style.height = "250px";
});

Output

The mouseenter event is similar to the mouseover event, but it only fires when the mouse pointer enters the element’s boundary and not when it enters its descendants.

The mouseout and mouseleave event in JavaScript

The mouseout event is fired when the mouse pointer leaves an element. It can be used to perform actions when the mouse pointer leaves an element. For example, a mouseout event can be used to hide a tooltip when the mouse pointer leaves an element. The mouseout event is triggered when the mouse pointer moves out of an element. The event object contains information about the mouse movement such as the x and y coordinates of the mouse pointer and the element that triggered the event.

To create a mouseout event, we will pass the mouseout event to the addEventListener() method and to showcase how we can make use of it, we will hover over the same box as in the previous sections to log some statement to the console.

let box = document.getElementById("box");

box.addEventListener("mouseout", function (event) {
    console.log("Mouse Out on element " + event.target.id);
});

Output

Mouse Out on element box

The mouseleave event is similar to the mouseout event, but it only fires when the mouse pointer leaves the element’s boundary and not when it leaves its descendants.

The contextmenu event in JavaScript

The contextmenu event is fired when the right mouse button is clicked on an element. It is used to perform specific actions when the right mouse button is clicked. For example, a contextmenu event can be used to display a custom context menu when the right mouse button is clicked on an element.

The contextmenu event is triggered when the right mouse button is clicked on an element. This event can be used to show a context menu or prevent the default context menu from appearing.

document
    .getElementById("box")
    .addEventListener("contextmenu", function (event) {
        event.preventDefault();
        console.log("Context Menu on element " + event.target.id);
    });

Summary

JavaScript mouse events provide a way for developers to respond to user interactions with the mouse. These events allow developers to perform specific actions based on the position of the mouse, the type of mouse button used, or the number of clicks. In this article, we have covered the basics of mouse events in JavaScript. We have discussed the different mouse events available such as click, dblclick, mouseup, mousedown, mouseover, mouseenter, mouseout, mouseleave, and contextmenu. We have also shown how to add event handlers to elements using JavaScript and how to access the event object to retrieve information about the mouse movement. With these concepts, you can now implement mouse interaction in your web pages that respond to user actions in real-time.

References

MouseEvent - Web APIs | MDN
EventTarget.addEventListener() - Web APIs | MDN (mozilla.org)

Olorunfemi Akinlua

Olorunfemi Akinlua

Boasting over five years of experience in JavaScript, specializing in technical content writing and UX design. With a keen focus on programming languages, he crafts compelling content and designs user-friendly interfaces to enhance digital experiences across various domains.

View all posts →

Related Articles