JavaScript Mouse Move Event Tutorial

1 year ago
Olivia Parker
1 minute

To set up a JavaScript mouse move event, you can use the onmousemove event handler. Below is a simple example where a tooltip will pop up displaying the current position of the mouse as it moves across the page.

<!DOCTYPE html>
<html>
<head>
    <title>Mouse Move Event Example</title>
</head>
<body>

<script>
    function showMousePosition(event) {
        var x = event.clientX;
        var y = event.clientY;
        alert("Mouse position - X: " + x + ", Y: " + y);
    }

    document.onmousemove = showMousePosition;
</script>

</body>
</html>

In the example above, the showMousePosition function is called when the mouse is moved on the page, displaying a pop-up box showing the current position of the mouse. You can also write the showMousePosition function in an external JavaScript file and then include it using the src attribute.

bannerAds