EN
JavaScript - onmousemove event example
0
points
In this article, we would like to show you onmousemove event example in JavaScript.
Quick solution:
var myElement = document.querySelector('#element-id');
myElement.addEventListener('mousemove', function() {
console.log('onmousemove event occurred.');
});
or:
<div onmousemove="handleMousemove()"> div body here... </div>
or:
var myElement = document.querySelector('#element-id');
myElement.onmousemove = function() {
console.log('onmousemove event occurred.');
};
Practical examples
There are three common ways how to use onmousemove event:
- with event listener,
- with element attribute,
- with element property.
1. Event listener based example
In this section, we want to show how to use onmousemove event on div element via event listener mechanism.
// ONLINE-RUNNER:browser;
<!DOCTYPE html>
<html>
<head>
<style>
#my-div {
width: 200px;
height: 100px;
border: 1px solid #28a745;
background: #b5edc24a;
}
</style>
</head>
<body>
<p>Mouse over the rectangle to get the coordinates of your mouse pointer.</p>
<div id="my-div"></div>
<p id="coordinates"></p>
<script>
var myDiv = document.querySelector('#my-div');
var myDivCoordinates = document.querySelector('#coordinates');
myDiv.addEventListener('mousemove', getCoordinates); // add mousemove event
myDiv.addEventListener('mouseleave', clearCoordinates); // add mouseleave event
function getCoordinates(event) {
var x = event.clientX;
var y = event.clientY;
var coordinates = 'x = ' + x + ', y = ' + y;
myDivCoordinates.innerHTML = coordinates;
}
function clearCoordinates() {
myDivCoordinates.innerHTML = "";
}
</script>
</body>
</html>
2. Attribute based example
In this section, we want to show how to use onmousemove event on div element via attribute.
// ONLINE-RUNNER:browser;
<!DOCTYPE html>
<html>
<head>
<style>
#my-div {
width: 200px;
height: 100px;
border: 1px solid #28a745;
background: #b5edc24a;
}
</style>
</head>
<body>
<p>Mouse over the rectangle to get the coordinates of your mouse pointer.</p>
<div id="my-div" onmousemove="getCoordinates(event)" onmouseout="clearCoordinates()"></div>
<p id="coordinates"></p>
<script>
var myDivCoordinates = document.querySelector('#coordinates');
function getCoordinates(event) {
var x = event.clientX;
var y = event.clientY;
var coordinates = 'x = ' + x + ', y = ' + y;
myDivCoordinates.innerHTML = coordinates;
}
function clearCoordinates() {
myDivCoordinates.innerHTML = "";
}
</script>
</body>
</html>
3. Property based example
In this section, we want to show how to use onmousemove event on div element via property.
// ONLINE-RUNNER:browser;
<!DOCTYPE html>
<html>
<head>
<style>
#my-div {
width: 200px;
height: 100px;
border: 1px solid #28a745;
background: #b5edc24a;
}
</style>
</head>
<body>
<p>Mouse over the rectangle to get the coordinates of your mouse pointer.</p>
<div id="my-div"></div>
<p id="coordinates"></p>
<script>
var myDiv = document.querySelector('#my-div');
var myDivCoordinates = document.querySelector('#coordinates');
myDiv.onmousemove = function(event) {
var x = event.clientX;
var y = event.clientY;
var coordinates = 'x = ' + x + ', y = ' + y;
myDivCoordinates.innerHTML = coordinates;
}
myDiv.onmouseleave = function() {
myDivCoordinates.innerHTML = "";
}
</script>
</body>
</html>