JavaScript mousemove Event

The mousemove event fires repeatedly while the mouse pointer moves over an element. The original plus2net demo is preserved below: movement changes the box color, and moving out changes it again.

const box = document.getElementById('moveBox');
box.addEventListener('mousemove', () => {
  box.style.background = '#f06080';
});
box.addEventListener('mouseout', () => {
  box.style.background = '#f0f000';
});

Complete HTML and JavaScript Source

<div id="moveBox">
  Bring the mouse inside this box. Move around, then move outside it.
</div>
<script>
const moveBox = document.getElementById('moveBox');
moveBox.addEventListener('mousemove', () => {
  moveBox.style.background = '#f06080';
});
moveBox.addEventListener('mouseout', () => {
  moveBox.style.background = '#f0f000';
});
</script>

mousemove Syntax Top ↑

element.addEventListener('mousemove', (event) => {
  console.log(event.clientX, event.clientY);
});

mousemove Can Fire Very Often Top ↑

A handler may run many times during a single pointer movement. Keep the work inside it small. Expensive layout calculations, network calls or large DOM updates should not run on every movement without throttling or another control strategy.

Using mouseout with mousemove Top ↑

The live example uses mouseout to show when the pointer leaves the demo region. For many hover interfaces, mouseenter/mouseleave can be easier to reason about because they do not react to movement between descendants in the same way as mouseover/mouseout.

← Event Handling onMouseOver and onMouseOut →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: