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>
相关推荐
yqcoder34 分钟前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
会发光的猪。1 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客2 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
Domain-zhuo2 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
小丁爱养花2 小时前
前端三剑客(三):JavaScript
开发语言·前端·javascript
码农六六2 小时前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
徐同保3 小时前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~3 小时前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui
建群新人小猿3 小时前
会员等级经验问题
android·开发语言·前端·javascript·php
djk88884 小时前
Layui Table 行号
前端·javascript·layui