jQuery .mousemove() Method

Beginner
Deprecated since 3.3
7 min read
Updated: Oct 2026
5 examples
Live preview
jQuery .mousemove() method — deprecated shorthand for binding and triggering mousemove
Definition

What Is .mousemove()?

.mousemove() is jQuery’s legacy shorthand for the mousemove event (since 1.0). Pass a handler to bind; call it with no arguments to trigger. Binding forms are deprecated since 3.3 — prefer .on() / .trigger().

Remember
$("#box").mousemove(fn)              // bind (deprecated)
$("#box").mousemove({ mode: "x" }, fn) // bind + eventData (deprecated)
$("#box").mousemove()                // trigger (prefer .trigger)

// Modern:
$("#box").on("mousemove", fn)
$("#box").trigger("mousemove")
NeedLegacyModern
Bind.mousemove(fn).on("mousemove", fn)
Pass data.mousemove(data, fn).on("mousemove", data, fn)
Trigger.mousemove().trigger("mousemove")
Unbind.off("mousemove")
Approach

How to Use .mousemove()

Read legacy code safely, then rewrite bindings to the modern event API.

  1. Decide if the call is a bind (function passed) or a trigger (no args).
  2. For new work, use .on("mousemove", handler) instead of .mousemove(handler).
  3. Replace no-arg .mousemove() with .trigger("mousemove").
  4. Unbind with .off("mousemove") — especially after drag tracking ends.
PieceRequired?Role
handlerFor bindfunction(event) { … }
eventDataOptionalObject available as event.data (since 1.4.3)
No argumentsFor triggerFires mousemove on matched elements
Return—jQuery object (chainable)

Pseudocode

Pseudocode
if called with handler (and optional data):
  register handler for "mousemove"   // same as .on(...)
  // deprecated since 3.3 — prefer .on("mousemove", …)

if called with no arguments:
  fire "mousemove" on each matched element
  // prefer .trigger("mousemove")

on each real pointer move inside element:
  call handler(event)  // often hundreds of times / second
Reference

Cheat Sheet

Keep these migration facts handy when reading older jQuery.

TopicDetail
Bind (1.0).mousemove(handler) — deprecated 3.3
Bind + data (1.4.3).mousemove(eventData, handler) — deprecated 3.3
Trigger (1.0).mousemove() → prefer .trigger("mousemove")
Coordsevent.pageX / event.pageY (same as modern API)
DelegationNot available via shorthand — use .on("mousemove", sel, fn)
StatusWorks in jQuery 3.x; avoid in new code
Try it

Live Preview

Move over the pad (legacy .mousemove(fn)) or click Trigger (no-arg .mousemove()).

Uses deprecated .mousemove() — prefer .on() / .trigger() for new code.

Result
Move over the pad or click Trigger
→ bind vs trigger (legacy shorthand)
Code

jQuery Examples

Short legacy snippets plus the modern rewrite. Open Try It Yourself to run each lab.

Example 1 — Bind with .mousemove(handler)

Log document coordinates with the deprecated binding shorthand.

jQuery
$("#target").mousemove(function (event) {
  $("#log").text(
    "pageX: " + event.pageX + ", pageY: " + event.pageY
  );
});

// Prefer: $("#target").on("mousemove", function (event) { … });
Try It Yourself

How It Works

  1. Pass a function. .mousemove(fn) registers the handler (deprecated).
  2. Move inside the element. Each movement calls the function.
  3. Read coords. Use normalized pageX / pageY.
  4. Migrate. Swap to .on("mousemove", fn) in new code.

Example 2 — Pass eventData

Since 1.4.3, pass an object before the handler — available as event.data.

jQuery
$("#target").mousemove({ mode: "track" }, function (event) {
  $("#log").text(
    "mode: " + event.data.mode +
    " | pageX: " + event.pageX
  );
});

// Prefer: .on("mousemove", { mode: "track" }, fn)
Try It Yourself

How It Works

  1. First argument is data. { mode: "track" } is not the handler.
  2. Second argument is the function. It runs on each move.
  3. Read event.data. Avoids an extra closure for shared config.
  4. Modern form. Same pattern with .on("mousemove", data, fn).

Example 3 — Trigger with No Arguments

Call .mousemove() with no args to fire bound handlers programmatically.

jQuery
var count = 0;

$("#target").mousemove(function () {
  count++;
  $("#log").text("Handler fired (count: " + count + ")");
});

$("#fire").on("click", function () {
  $("#target").mousemove();  // prefer .trigger("mousemove")
});
Try It Yourself

How It Works

  1. Bind first. A handler must exist for the trigger to do anything useful.
  2. Empty call fires. .mousemove() synthesizes the event.
  3. Same handlers run. Real moves and triggers share the callback.
  4. Prefer clarity. Write .trigger("mousemove") in new code.

Example 4 — Migrate to .on("mousemove")

Side-by-side: deprecated shorthand vs the modern binding API.

jQuery
// Legacy (deprecated)
$("#legacy").mousemove(function (event) {
  $("#log").text("Legacy pageX: " + event.pageX);
});

// Modern (preferred)
$("#modern").on("mousemove", function (event) {
  $("#log").text("Modern pageX: " + event.pageX);
});
Try It Yourself

How It Works

  1. Same event name. Both listen for mousemove.
  2. Behavior matches. For a simple bind, results are identical.
  3. .on() is the future. Supports delegation and one consistent API.
  4. Rename when you touch it. No need to rewrite an entire app at once.

Example 5 — Legacy Drag Pattern

Older code often pairs .mousedown() with .mousemove() on document.

jQuery
function onMove(event) {
  $("#box").css({ left: event.pageX - 40, top: event.pageY - 20 });
}

$("#box").mousedown(function (event) {
  if (event.which !== 1) return;
  $(document).mousemove(onMove);           // legacy bind
  $(document).one("mouseup", function () {
    $(document).off("mousemove", onMove);  // always use .off()
  });
});

// Prefer: .on("mousedown" / "mousemove") throughout
Try It Yourself

How It Works

  1. Bind only while dragging. Attach move on press, not permanently.
  2. Track on document. Follows the pointer even outside the box.
  3. Cleanup on release. .off("mousemove", onMove) stops the listener.
  4. Modern rewrite. Use .on("mousedown") / .on("mousemove") instead of shorthands.

Edge Cases & Pitfalls

Watch for these when reading or migrating .mousemove() code.

deprecated

Do not use in new projects

Binding forms are deprecated since 3.3. Prefer .on("mousemove") everywhere new.

overload

Bind vs trigger look alike

.mousemove(fn) binds; .mousemove() fires. Always check the arguments.

delegate

No event delegation

Shorthand cannot do .on("mousemove", ".child", fn). Use .on() for dynamic children.

perf

Still a high-frequency event

Whether you bind with shorthand or .on(), keep handlers light and unbind when done.

coords

Triggered coords may be undefined

No-arg .mousemove() / .trigger("mousemove") often leave pageX unset.

Compatibility

Browser Support

.mousemove() has shipped since jQuery 1.0 (eventData form since 1.4.3). It works wherever your jQuery build runs. Binding forms are deprecated since 3.3 but still functional in jQuery 3.x.

✓ jQuery 1.0+ · Deprecated 3.3

jQuery .mousemove()

Available in jQuery 1.x, 2.x, and 3.x across Chrome, Firefox, Safari, Edge, and other browsers with jQuery loaded.

100% With jQuery loaded
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
.mousemove() Browsers

Bottom line: Safe to encounter in legacy apps. For new code, use .on("mousemove") and .trigger("mousemove").

Analysis

Performance Notes

ApproachCostBest for
.mousemove(fn)Same as .on()Legacy reading only
.on("mousemove", fn)Same bind cost + delegationAll new code
Always-on document moveVery high frequencyAvoid — bind during drag only

Migrating shorthand to .on() does not change event frequency. The win is a single, flexible API — not a free performance boost.

Remember

Key Takeaways

  • Role: legacy bind-or-trigger shorthand for mousemove.
  • Status: binding forms deprecated since jQuery 3.3.
  • Migrate: .on("mousemove") + .trigger("mousemove").
  • Cleanup: always .off("mousemove") after temporary document tracking.

One line: recognize .mousemove() in old code — write .on("mousemove") in new code.

Frequently Asked Questions

With a handler — .mousemove(fn) or .mousemove(eventData, fn) — it binds a function that runs when the pointer moves inside the element. With no arguments — .mousemove() — it triggers the mousemove event. Binding forms are deprecated since jQuery 3.3.
Yes. Prefer .on('mousemove', handler) for binding and .trigger('mousemove') for firing. jQuery 3.x still runs the shorthand for compatibility; migrate when you touch legacy code.
.mousemove(fn) only registers a callback. .mousemove() with no arguments fires the event on each matched element (same idea as .trigger('mousemove')). Check whether a function is passed before reading old code.
Replace .mousemove(fn) with .on('mousemove', fn). Replace .mousemove(data, fn) with .on('mousemove', data, fn). Replace no-arg .mousemove() with .trigger('mousemove'). Unbind with .off('mousemove'). Behavior for simple bindings is the same.
Yes for backward compatibility. It still binds and triggers correctly. Do not use it in new projects — use the modern mousemove event API instead.
Since 1.4.3 you can pass an object before the handler. It appears as event.data inside the callback. The modern form is .on('mousemove', eventData, handler).

Next: mouseout event

Learn when the pointer leaves an element — and how it differs from mouseleave.

mouseout tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

jQuery mousemove Event jQuery mouseout Event