JavaScript基础(29)_事件对象、鼠标移动事件

news2025/1/14 4:20:49

事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如，鼠标的坐标、键盘哪个键被按下、鼠标滚轮滚动的方向。。。

鼠标移动事件（响应函数）：
onmousemove：该事件将会在“鼠标在元素中移动时”被触发。
属性：
clientX：可以获取鼠标指针在可见窗口的水平坐标。
clientY：可以获取鼠标指针在可见窗口的垂直坐标。
pageX：可以获取鼠标指针相对于当前页面的水平坐标。
pageY：可以获取鼠标指针相对于当前页面的垂直坐标。

兼容性问题
1、在IE8及以上的浏览器中，是将事件对象作为window对象的属性保存的。
2、在IE8中，响应函数被触发时，浏览器不会传递事件对象，需要在对象前加window。但此方式在火狐浏览器不兼容。
3、在IE8中，不支持 pageX、pageY 这两个属性。
4、chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取，火狐等浏览器认为浏览器的滚动条是html的。

关于“传递事件对象”浏览器兼容性解决办法：
方法1、if(!event){
event = window.event;
}
方法2、event = event || window.event;

关于“获取滚动条距离”浏览器兼容性解决办法：
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
var st = document.body.scrollTop || document.documentElement.scrollTop;

获取鼠标在可见窗口坐标的计算方式：
方式1：
var x = event.pageX;
var y = event.pageY;
方式2：
var x = event.clientX + sl;
var y = event.clientY + st;

案例1：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象</title>
    <style>
        #mouseArea {
            width: 200px;
            height: 100px;
            background-color: aquamarine;
        }

        #showMouseMove {
            height: 50px;
            width: 200px;
            background-color: bisque;
        }
    </style>
    <script>
        window.onload = function () {
            var mouseArea = document.getElementById("mouseArea");
            var showMouseMove = document.getElementById("showMouseMove");
            mouseArea.onmousemove = function (event) {
                // 解决多平台浏览器的兼容性问题
                event = event || window.event;
                var x = event.clientX;
                var y = event.clientY;
                showMouseMove.innerHTML = "X = " + x + " Y = " + y;
            }
        }
    </script>
</head>
<body>
    <div id="mouseArea"></div>
    <div id="showMouseMove"></div>
</body>
</html>

案例2：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>DIV跟随鼠标移动</title>
</head>
<style>
    body{
        width: 1800px;
        height: 1000px;
    }
    #box1 {
        width: 80px;
        height: 60px;
        background-color: aquamarine;
        /* 开启绝对定位才能获取偏移量 */
        position:absolute;
    }
</style>
<script>
    window.onload = function(){
        var box1 = document.getElementById("box1");
        document.onmousemove = function(event){
            // 获取事件对象，同时解决各浏览器兼容性问题
            event = event||window.event;
            // 获取滚动条的距离,同时解决各浏览器兼容性问题
            var st = document.body.scrollTop || document.documentElement.scrollTop;
            var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
            // 获取鼠标在可见窗口的坐标
            var x = event.clientX;  
            var y = event.clientY;  
            // 把鼠标在当前页面的坐标位置赋值给div
            box1.style.left = x + sl + "px";      
            box1.style.top = y + st + "px";  
            // 等价于：
            // var x = event.pageX;
            // var y = event.pageY;  
            // box1.style.left = x + "px";
            // box1.style.top = y + "px";
        }

    }
</script>
<body>
    <div id="box1"></div>
</body>
</html>