//INPUT: Read mouse movements and position

<New code>

//INPUT: listen for mouse movements and get the coordinates
document.onmousemove = function ( event ) {
    var topCoordinate    = event.clientY;
    var leftCoordinate   = event.clientX;
}
// see code example below for a procedure-oriented and object-oriented code examples

Listening for mouse movement

Your programs can trigger things whenever a mouse is moved by using the following snippet of code at the end of your <script>:

document.onmousemove = function ( event ) {
// code inside here is triggered by mouse movement
}

Find the current mouse position

Once you have the event variable that contains the information about the onmouseover event, the mouse position can be accessed through two variables: 

var topCoordinate    = event.clientY;
var leftCoordinate   = event.clientX;

Because of this, it is very handy to be able to find out the size and orientation of the screen so you can customize your output for the user.

Example code

Current mouse position:

Top:
Left:


The above was created with the following object-oriented code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Read mouse movement and position</title>
        <meta name="description" content="Learn how to read mouse movement and position">
        <meta name="author" content="Dave Drapak">
    </head>

    <body>
        <h3>Current mouse position:</h3>
        <p>
            Top: <span id="topID"></span><br />
            Left: <span id="leftID"></span>
        </p>
        
	<script>
            //mouse OBJECT
            //  properties:
            //      .top    -top coordinate in pixels
            //      .left:  -left coordinate in pixels
            //  methods:
            //      .getCurrentPosition( event )    -gets the current mouse position from an onmousemove event
            //      .displayPosition( )             -displays the current position in #topID and #leftID
            var mouse = {
                top:    0,  // top coordinate in pixels
                left:   0,  // left coordinate in pixels
                
                //INPUT: get and store the mouse position from the mouse movement event
                getCurrentPosition: function ( event ) {
                    this.top    = event.clientY;
                    this.left   = event.clientX;
                },
                
                //OUTPUT: display the current mouse position
                displayPosition: function () {
                    document.getElementById('topID').innerHTML  = this.top;
                    document.getElementById('leftID').innerHTML = this.left;
                }
            };
            
            //INPUT: listen for mouse movements
            document.onmousemove = function ( event ) {
                mouse.getCurrentPosition( event );
                mouse.displayPosition();
            }   
        </script>
    </body>
</html>


It could have also been created by the identical procedurally-oriented code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Read mouse movement and position</title>
        <meta name="description" content="Learn how to read mouse movement and position">
        <meta name="author" content="Dave Drapak">
        
    </head>

    <body>
        <h3>Current mouse position:</h3>
        <p>
            Top: <span id="topID"></span><br />
            Left: <span id="leftID"></span>
        </p>
	<script>
            //INPUT: get the current position returned by the mouse event
            var getCurrentMousePosition = function ( event ) {
                var topCoordinate    = event.clientY;
                var leftCoordinate   = event.clientX;
                
                return {    // there are two parts to the coordinate, so it is best to return it as an object
                    top: topCoordinate, 
                    left: leftCoordinate
                };
            }

            //OUTPUT: display the current mouse position
            var displayPosition = function ( coordinateObj ) {
                document.getElementById('topID').innerHTML  = coordinateObj.top;
                document.getElementById('leftID').innerHTML = coordinateObj.left;
            }

            var mainProcedure = function ( event ) {
                var coordinateObj = getCurrentMousePosition( event );
                displayPosition( coordinateObj );
            }
            
            //INPUT: listen for mouse movements and trigger mainProcedure each time
            document.onmousemove = mainProcedure;
        </script>
    </body>
</html>

Learn more