The mousemove event is triggered when a pointer moves inside the web tag or around a specific element. Handling mouse movement is straightforward by utilizing the mouse's position. This event is incorporated within an event handler. It executes within the script tag to react to particular mouse actions or movements.
Whenever the pointer traverses the designated section of the webpage, the mousemove event triggers and executes the associated code. The mousemove event is a key component of mouse events, alongside others such as mouseup, mouseout, click, mousedown, and various interactions that utilize the MouseEvent interface.
Syntax
The syntax provided below employs the "mousemove" function to display the event of mouse movement.
<div id = "demoDIV" onmousemove = "function_name()"> </div>
<script>
function function_name(){
//write code here!
}
</script>
The syntax below illustrates the mouse movement event by utilizing the "mousemove" function in conjunction with the addEventListener method.
<script>
object.addEventListener("mousemove", function_name);
function_name(){
//write code here!!!
}
</script>
The syntax presented below demonstrates the utilization of the mousemove event in conjunction with a JavaScript object and a corresponding function.
<script>
Object.onmousemove = function_name;
function_name(){
//write code here!!!
}
</script>
Support browsers
The mouse movement event function works through many browsers. The following browsers are supported by the "mousemove" and "onmousemove" functions.
- Chrome
- Edge
- Firefox
- Opera
- Safari
Examples
The mousemove events can be utilized through various methods, functions, and events leveraging JavaScript tags. Any desired functionality can be implemented in response to mouse movements occurring on HTML tags. Additionally, the mouse event can be employed with objects, windows, and methods.
Example 1: A fundamental mouse movement event utilizing the HTML element along with a JavaScript function. In this instance, we apply the mousemove event on the div element, accompanied by the designated handler name. This handler name is referenced within the JavaScript code to execute the desired functionality.
<!DOCTYPE html>
<html>
<head>
<title> How to use the mousemove event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
colour: red;
}
</style>
</head>
<body>
<h3> How to use the mousemove event in javascript </h3>
<b> The mousemove event for div tag in javascript </b>
<p id = "datas" style="color:red !important;"> </p>
<p id = "demos" style="color:navy !important;"> </p>
<div id = "demoDIV" onmousemove = "demoDIVFunction(event)" onmouseout = "clearCoo()">
The javascript mousemove event with the Html tag uses with the mouse movement event on the web page. When we move the mouse or pointer with the event handler, operate the div tag of the html page.
</div>
<script>
function demoDIVFunction(element) {
document.getElementById("datas").innerHTML = "JavaScript Mouse move function with object using html tag activates successfully!!!";
document.getElementById("demoDIV").style.color = "white";
document.getElementById("demoDIV").style.backgroundColor = "grey";
document.getElementById("demoDIV").style.border = "2px dotted blue";
var x_id = element.clientX;
var y_id = element.clientY;
var coo = "Coordinates are: (" + x_id + "," + y_id + ")";
document.getElementById("demos").innerHTML = coo;
}
function clearCoo() {
document.getElementById("datas").innerHTML = "The mousemoveevent stop because of the pointer";
}
</script>
</body>
</html>
Output
The subsequent output showcases the web page following the execution of the mousemove event function.
Example 2: The fundamental mouse movement event utilizing the HTML tag alongside a JavaScript function. In this instance, we can apply the mousemove event on the div tag, accompanied by the designated handler name. This handler name is referenced within the JavaScript tag to execute the intended functionality.
<!DOCTYPE html>
<html>
<head>
<title> How to use the mousemove event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
colour: red;
}
</style>
</head>
<body>
<h3> The mouseup event for body tag in javascript </h3>
<p id = "datas" style = "color:red !important;"> </p>
<p id = "demos" style = "color:navy !important;"> </p>
<div id = "demoDIV" onmousemove = "demoDIVFunction(event)" onmouseout = "clearCoo()">
The javascript mouseup event with the addEventListner event uses with the mouse movement event on the web page. When we release the pressed button, the event handler operates the body tag of the html page.
</div>
<script>
function demoDIVFunction(element) {
document.getElementById("datas").innerHTML = "JavaScript Mouse move function with object using html tag activates successfully!!!";
document.getElementById("demoDIV").style.color = "white";
var color = "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase();
document.getElementById("demoDIV").style.backgroundColor = color;
document.getElementById("demoDIV").style.border = "2px dotted blue";
var x_id = element.clientX;
var coo = "X-Coordinates are: (" + x_id + " is x-Cooridination. )";
document.getElementById("demos").innerHTML = coo;
}
function clearCoo() {
document.getElementById("datas").innerHTML = "The mousemoveevent stop because of the pointer";
}
</script>
</body>
</html>
Output
The output below illustrates the web page following the execution of the mousemove event function.
Example 3: The event for mouse movement utilizing the HTML tag along with a JavaScript function. In this scenario, we can implement the mousemove function on the body tag, accompanied by the designated handler name.
<!DOCTYPE html>
<html>
<head>
<title> How to use the mousemove event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
colour: red;
}
</style>
</head>
<body id = "demoDIV1">
<h3> The mousemove event for body tag in javascript </h3>
<b> You can move the mouse anywhere on the web page.</b>
<p id = "datas" style = "color:red !important;"> </p>
<p id = "demos" style = "color:navy !important;"> </p>
<div id = "demoDIV">
The javascript mousemove event with the addEventListner event uses with the mouse movement event on the web page. When we release the pressed button, an event handler operates the body tag of the html page.
</div>
<script>
//The onmousemove event works with the window
window.onmousemove = demoDIVFunction;
function demoDIVFunction(element) {
document.getElementById("datas").innerHTML = "JavaScript Mouse move function with object using windows function activates successfully!!!";
document.getElementById("demoDIV1").style.color = "white";
var color = "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase();
document.getElementById("demoDIV1").style.backgroundColor = color;
var x_id = element.clientX;
var coo = "X-Coordinates are: (" + x_id + " is x-Coordination. )";
document.getElementById("demos").innerHTML = coo;
}
function clearFunction() {
document.getElementById("datas").innerHTML = "The mousemove event stop because of the Pointer";
}
</script>
</body>
</html>
Output
The output shown below illustrates the web page following the execution of the mousemove event function.
Conclusion
The mousemove event is triggered whenever the mouse is moved over the webpage, an HTML element, or any container present on the page. This event can be utilized within web applications to implement mouse interactions based on the user's movements. It is straightforward for both users and developers to engage with mouse functionalities across laptops, desktops, and various other devices that support mouse input.