Now when the mouse pointer moves within the target button, the messages are appended to <div id="log">:

Handler for .mousemove() called at (399, 48)Handler for .mousemove() called at (398, 46)Handler for .mousemove() called at (397, 44)Handler for .mousemove() called at (396, 42)

To trigger the event manually, apply .mousemove() without an argument:

$( "#other" ).click(function() {
$( "#target" ).mousemove();
});

After this code executes, clicks on the Trigger button will also append the message:

Handler for .mousemove() called at (undefined, undefined)

When tracking mouse movement, you usually need to know the actual position of the mouse pointer. The event object that is passed to the handler contains some information about the mouse coordinates. Properties such as .clientX, .offsetX, and .pageX are available, but support for them differs between browsers. Fortunately, jQuery normalizes the .pageX and .pageY properties so that they can be used in all browsers. These properties provide the X and Y coordinates of the mouse pointer relative to the top-left corner of the document, as illustrated in the example output above.

Keep in mind that the mousemove event is triggered whenever the mouse pointer moves, even for a pixel. This means that hundreds of events can be generated over a very small amount of time. If the handler has to do any significant processing, or if multiple handlers for the event exist, this can be a serious performance drain on the browser. It is important, therefore, to optimize mousemove handlers as much as possible, and to unbind them as soon as they are no longer needed.

A common pattern is to bind the mousemove handler from within a mousedown hander, and to unbind it from a corresponding mouseup handler. If implementing this sequence of events, remember that the mouseup event might be sent to a different HTML element than the mousemove event was. To account for this, the mouseup handler should typically be bound to an element high up in the DOM tree, such as <body>.

Additional Notes:

As the .mousemove() method is just a shorthand for .on( "mousemove", handler ), detaching is possible using .off( "mousemove" ).

Example:

Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window, which in this case is the iframe.