The HTML onmousemove attribute is an event handler that triggers a script to execute when the mouse pointer moves over an element.
Definition and Usage
➔ It is used to trigger events for continuous mouse movement within the bounds of an element.
➔ The rate of event firing per millisecond depends on the platform, the speed of mouse movement, and the processing speed of the machine.
➔ The event object contains useful information, such as (clientX, clientY) which helps to get the real-time coordinates of the mouse pointer relative to the browser window.
Key Characteristics about the onmousemove event:
➔ This event fires continuously while the element is moving and as long as the mouse cursor is within the element's bounds.
➔ This event is different from onmouseover because onmouseover fires only once as long as the mouse cursor is within the bounds of the element.
➔ When a JavaScript function is called, an event object is passed to the handler function, this object contains a lot of useful information, including cursor coordinates.
➔ With the exception of tags like head, meta, script, base, style, and title, most elements support the onmousemove event.
Syntax
//In HTML
<element onmousemove="myFunction()"></element>
//In javascript
object.onmousemove = function() {myFunction()};
// Or using addEventListener
object.addEventListener("mousemove", myFunction);
Single left or middle mouse button click event sequence:
- 1 onmousedown - is triggered when the mouse button is initially pressed down.
- 2 onmouseup - is triggered when the mouse button is released.
- 3 onclick - is fired after both mousedown and mouseup events.
Double left click event sequence:
- 1 onmousedown - is triggered when the mouse button is initially pressed down.
- 2 onmouseup - is triggered when the mouse button is released.
- 3 onclick - is triggered after both mousedown and mouseup events.
- 4 onmousedown - is triggered when the mouse button is initially pressed down.
- 5 onmouseup - is triggered when the mouse button is released.
- 6 onclick - is triggered after both mousedown and mouseup events.
- 7 ondblclick - is triggered after two complete click sequences within about 300-500 milliseconds.
Right click event sequence:
- 1 onmousedown - is triggered when the mouse button is initially pressed down.
- 2 onmouseup - is triggered when the mouse button is released.
- 3 oncontextmenu - is triggered when the right mouse button is pressed and released.
Mouse movement event sequence:
- 1 onmouseover - is triggered when the pointer moves over an element or one of its descendants.
- 2 onmouseenter - is triggered when the pointer enters the element, not its descendants (there is no bubble in the DOM hierarchy).
- 3 onmousemove - is triggered repeatedly when the pointer moves over an element.
- 4 onmouseout - is triggered when the pointer moves out of an element or into one of its descendants.
- 5 onmouseleave - is triggered only when the pointer explicitly leaves the element's bounds, not outside its descendants.
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| onmousemove | All visible elements |
The onmousemove event attribute example.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML onmousemove attribute example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content='charset=utf-8' />
<style>
.mydiv {
border: 1px solid black;
padding: 50px 30px;
background: rgb(100, 100, 100, 0.3);
}
</style>
</head>
<body>
<div id="sample" class="mydiv" onmousemove="myfunc(event)">
Move your mouse cursor over this area.
<p>Coordinates: <span id="coords">0, 0</span></p>
</div>
<script>
const area = document.getElementById('sample');
const result = document.getElementById('coords');
area.addEventListener('mouseout', (event) => {
result.textContent = `Mouse cursor is out.`;
});
function myfunc(event) {
const x = event.clientX;
const y = event.clientY;
result.textContent = x +","+ y;
}
</script>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.