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

事件对象

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

鼠标移动事件(响应函数):

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:

html 复制代码
<!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:

html 复制代码
<!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>
相关推荐
ZL不懂前端20 分钟前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x23 分钟前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
理想不理想v2 小时前
vue经典前端面试题
前端·javascript·vue.js
小阮的学习笔记2 小时前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜2 小时前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=2 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
小政爱学习!2 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript