js获取鼠标移动

在JavaScript中获取鼠标移动事件主要通过监听mousemove事件来实现。

一、基础概念

事件监听
- 在JavaScript中，可以使用addEventListener方法为HTML元素添加事件监听器。对于鼠标移动事件，就是监听mousemove事件。

事件对象
- 当mousemove事件触发时，会传递一个事件对象（通常命名为event或者e）给事件处理函数。这个对象包含了与鼠标移动相关的信息，如鼠标的坐标（clientX、clientY、pageX、pageY等）。

二、示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale = 1.0">
    <title>Mouse Move Example</title>
    <style>
        #mousePosition {
            position: fixed;
            top: 10px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 5px;
            border - radius: 5px;
        }
    </style>
</head>

<body>
    <div id="mousePosition">X: 0, Y: 0</div>
    <script>
        const mousePositionDiv = document.getElementById('mousePosition');
        document.addEventListener('mousemove', function (e) {
            const x = e.clientX;
            const y = e.clientY;
            mousePositionDiv.textContent = `X: ${x}, Y: ${y}`;
        });
    </script>
</body>

</html>

在上述代码中：

首先创建了一个div元素用于显示鼠标的坐标。
然后使用document.addEventListener('mousemove', function (e) {...})来监听整个文档的鼠标移动事件。当鼠标在页面上移动时，事件处理函数会被调用，从事件对象e中获取clientX和clientY属性（这两个属性表示鼠标相对于浏览器可视窗口左上角的坐标），并将坐标值显示在div元素中。

三、优势