JavaScript Element mousemove Event

What You’ll Learn

The mousemove event fires when a pointing device moves inside an element. Learn addEventListener vs onmousemove, coordinates, movementX/movementY, canvas drawing with mousedown/mouseup, performance tips, and five try-it labs.

Introduction

mousemove answers: “Did the pointer just move while over this element?” It fires whether or not buttons are pressed, and it can fire extremely often while the user is moving.

That high rate makes it perfect for drawing, custom cursors, and drag tracking— and also easy to misuse. Keep handlers cheap, or only process moves while a drag/draw flag is true.

Understanding mousemove

An instance event that answers: “Did the pointer move here?”

• Fires when the pointer moves while inside the element.
• Buttons optional — moves fire even with no button down.
• MouseEvent — coordinates, movement deltas, and buttons.
• High rate — depends on mouse speed, device, and system load.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("mousemove", (event) => { });

onmousemove = (event) => { };

Event type

A MouseEvent (inherits from UIEvent and Event).

Handy properties

⚠️ High Fire Rate

MDN notes that mousemove can fire at a very high rate. Heavy DOM writes, layout thrash, or logging every event can stutter the page.

• Only update UI while dragging / drawing if that is your use case.
• Throttle or batch work with requestAnimationFrame.
• Prefer reading event fields once and writing DOM sparsely.
• Consider Pointer Events + capture for drag outside the element.

⚖️ mousemove vs Related Events

Examples Gallery

Examples follow MDN Element: mousemove event. Move the pointer over the stage (and press to draw where noted).

const stage = document.getElementById("stage");
const out = document.getElementById("out");

stage.addEventListener("mousemove", (event) => {
  out.textContent = event.clientX + ", " + event.clientY;
});

248, 112

const stage = document.getElementById("stage");
const out = document.getElementById("out");

stage.onmousemove = (event) => {
  out.textContent = "onmousemove @ " + event.offsetX + "," + event.offsetY;
};

onmousemove @ 40,18

const stage = document.getElementById("stage");
const out = document.getElementById("out");

stage.addEventListener("mousemove", (event) => {
  out.textContent =
    "dx=" + event.movementX + " dy=" + event.movementY;
});

dx=3 dy=-1

let isDrawing = false;
let x = 0;
let y = 0;

const myPics = document.getElementById("myPics");
const context = myPics.getContext("2d");

myPics.addEventListener("mousedown", (e) => {
  x = e.offsetX;
  y = e.offsetY;
  isDrawing = true;
});

myPics.addEventListener("mousemove", (e) => {
  if (isDrawing) {
    drawLine(context, x, y, e.offsetX, e.offsetY);
    x = e.offsetX;
    y = e.offsetY;
  }
});

window.addEventListener("mouseup", () => {
  if (isDrawing) {
    x = 0;
    y = 0;
    isDrawing = false;
  }
});

function drawLine(context, x1, y1, x2, y2) {
  context.beginPath();
  context.strokeStyle = "black";
  context.lineWidth = 1;
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.stroke();
  context.closePath();
}

(lines appear on the canvas while you drag)

const stage = document.getElementById("stage");
const out = document.getElementById("out");
let dragging = false;

stage.addEventListener("mousedown", (event) => {
  if (event.button !== 0) return;
  dragging = true;
  out.textContent = "dragging…";
});

stage.addEventListener("mousemove", (event) => {
  if (!dragging) return;
  out.textContent = "drag @ " + event.offsetX + "," + event.offsetY;
});

window.addEventListener("mouseup", () => {
  dragging = false;
  out.textContent = "idle";
});

drag @ 64,30

🚀 Common Use Cases

• Canvas / whiteboard drawing while the button is held.
• Custom cursors, crosshairs, and follow-mouse UI.
• Drag handles, scrubbers, and pan/zoom controls.
• Relative look / pan using movementX / movementY.
• Debugging pointer paths with lightweight coordinate logs.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Can fire at a very high rate—keep work cheap or gate behind a drag flag.
• For drag past element bounds, listen on window / use pointer capture.
• Touch / pen: consider pointermove for a unified model.
• Related learning: mouseout, mouseleave, addEventListener(), JavaScript hub.

💡 Best Practices