You are here: Reference > JavaScript > client-side > event handling > events > onmousemove

onmousemove event | mousemove event

Browser support:
Occurs when the user moves the mouse over the element.
Use the onmouseover event to receive a notification when the user moves the mouse pointer into and the onmouseout event to receive a notification when the user moves the mouse pointer out of an element.
Note: the onmousemove event is not fired during a drag operation. For that case, use the ondragover event.

How to register:

<ELEMENT onmousemove="handler">

In JavaScript:
object.onmousemove = handler;
object.addEventListener ("mousemove", handler, useCapture);
object.attachEvent ("onmousemove", handler);
You can find the related objects in the Supported by objects section below.
The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.
For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles Yes
Cancelable No
Event object MouseEvent

Actions that invoke the onmousemove event:

  • Moving the mouse pointer out of an element.

The order of events related to the onmousemove event:

Internet Explorer Firefox, Opera, Google Chrome, Safari
  1. onmouseover
  2. onmouseenter
  3. onmousemove
  4. onmouseout
  5. onmouseleave
  1. onmouseover
  2. onmousemove
  3. onmouseout

Example HTML code 1:

This example illustrates the use of the onmousemove event:
        #flying {
            position: fixed; 
<!--[if lte IE 6]> 
        #flying {
            position: absolute; /* ie6 does not support fixed position */

    <script type="text/javascript">
        function UpdateFlyingObj (event) {
            var mouseX = Math.round (event.clientX);
            var mouseY = Math.round (event.clientY);

            var flyingObj = document.getElementById ("flying");
   = mouseX + "px";
   = mouseY + "px";

<body onmousemove="UpdateFlyingObj (event);">
    <div style="height:1000px;">The flying object also works for document scrolling.</div>

    <img id="flying" src="flying.gif" />
Did you find this example helpful? yes no

Example HTML code 2:

This example dumps the order of events while the mouse moves into, over and out of an element:
    <script type="text/javascript">
        function DumpInfo (event) {
            var info = document.getElementById ("info");
            info.innerHTML += event.type + ", ";
    <div style="background-color:#d0f0a0; width:200px" 
            onmouseover="DumpInfo (event)" onmouseenter="DumpInfo (event)"
            onmousemove="DumpInfo (event)"
            onmouseout="DumpInfo (event)" onmouseleave="DumpInfo (event)">
        Move your mouse pointer into and out of this element!
    <br /><br />
    <div id="info" style="background-color:#f0f0ff; font-weight:bold;"></div>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content