JavaScript-DOM-事件对象event

十二啊

已于 2022-04-28 22:03:33 修改

阅读量1k

点赞数

分类专栏：十二的 Javascript 之路文章标签： javascript 前端

于 2022-04-28 22:02:48 首次发布

十二

本文链接：https://blog.csdn.net/qq_42543177/article/details/124484311

版权

十二的 Javascript 之路专栏收录该内容

22 篇文章 0 订阅

订阅专栏

JavaScript-DOM-事件对象event

什么是事件对象？

当事件的响应函数被触发时，浏览器每次都会将一个事件作为实参传进响应函数，这个实参就是事件对象。
在事件对象中封装了当前事件的一切信息，比如：鼠标的坐标，键盘哪个按键被按下，鼠标滚轮的方向等。event对象的属性提供了有关事件的细节，其方法可以控制事件的传播。

注意：DOM Events规范定义了一个标准的事件模型event，它被除了IE怪异模模式以外的所有浏览器实现。而在IE8及以下浏览器中，是将事件对象作为window对象的属性保存的即window.event。
为了兼容这两种情况，可以用以下表达式进行兼容不同的event对象。

let event = event || window.event;

随鼠标移动的橘色小方块

运行下面的随鼠标移动的div试一试，看事件对象是如何应用的？

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>DOM-事件示例</title>
    <script>
        window.onload = function () {
            let box1 = document.getElementById('box1');
            let box2 = document.getElementById('box2');
            /**
             * onmousemove
             *  -该事件将在鼠标在元素中移动时触发
             */
            box1.onmousemove = function (event) {
                /* if(!event){
                    event = window.event;
                } */
                event = event || window.event; // 解决事件对象兼容性问题
                // clientX获取当前可见窗口鼠标水平指针坐标
                // clientY获取当前可见窗口鼠标垂直指针坐标
                let text = 'x=' + event.clientX + ',y:' + event.clientY
                box2.innerHTML = text;
            }

            // div3随鼠标移动小例子
            box3 = document.getElementById('box3');
            document.onmousemove = function (event) {
                event = event || window.event; // 解决事件对象兼容性问题
                /* 方法一
                 * -div的偏移量是相对整个页面的，所以得使用pageX，pageY获取
                 * -但是IE8以下不支持pageX，pageY获取，为了兼容及解决页面有滚动条的情况 
                 */
                // box3.style.left = event.pageX + 'px';
                // box3.style.top = event.pageY + 'px';
                // 
                /**
                 * 方法二
                 * 获取滚动条的距离
                 * -chrome认为浏览器的滚动条是boday的，通过body.scrollTop来获取
                 * -火狐等浏览器认为是html的,通过documentElement.scrollTop获取
                 */
                let sltop = document.body.scrollTop || document.documentElement.scrollTop;
                let slleft = document.body.scrollLeft || document.documentElement.scrollLeft
                box3.style.left = event.clientX + slleft + 'px';
                box3.style.top = event.clientY + sltop + 'px';
            }
        }
    </script>
    <style>
        #box1 {
            width: 400px;
            height: 300px;
            border: 1px solid rgb(0, 0, 0);
            margin: 10px;
        }

        #box2 {
            width: 400px;
            height: 100px;
            border: 1px solid rgb(0, 0, 0);
            margin: 10px;
        }

        #box3 {
            width: 50px;
            height: 50px;
            background-color: rgb(247, 137, 69);
            /* 必须得开启绝对定位使用left、top */
            position: absolute;
        }
    </style>
</head>

<body style="width: 2000px; height: 1000px;">
    <div id="box1">盒子一</div>
    <div id="box2">盒子二</div>
    <div id="box3">盒子三</div>
</body>

</html>