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)
