事件对象——JS_div的事件-优快云博客

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/124024753

文章目录

事件对象简单介绍
实例一：实现鼠标位置的记录
实例二：div跟随鼠标移动

事件对象简单介绍

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

验证：

 areaDiv.onmousemove = function(event){
            alert(event);
            // alert("我移动了");
        }

输出：
在这里插入图片描述

实例一：实现鼠标位置的记录

onmousemove:该事件将会在鼠标在元素中移动时被触发。

eg：
实现:记录鼠标位置：
效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #areaDiv{
            height: 200px;
            width: 500px;
            border: rosybrown 1px solid;
        }
        #showMsg{
            height: 100px;
            width: 500px;
            border: rosybrown 1px solid;
            line-height: 100px;/*值与父元素高度相等*/
            text-align: center;
        }
    </style>
    <script>
        window.onload = function(){
        var areaDiv = document.getElementById("areaDiv");
        var showMsg = document.getElementById("showMsg");

        areaDiv.onmousemove = function(event){
            // alert(event);
            // alert("我移动了");
            /*
            clientX:获取事件的水平座标
            clientY:获取事件的垂直座标
            */
           var x = event.clientX;
           var y = event.clientY;
           showMsg.innerHTML = "x="+x+", y="+y;

        }
        }
        

    </script>
</head>
<body>
   <div id="areaDiv"></div>
   <br>
   <div id="showMsg"></div> 
    
</body>
</html>

问题：IE8及以下不支持event，IE8的event表达方式：window.event;
所以手动判断：

    <script>
        window.onload = function(){
        var areaDiv = document.getElementById("areaDiv");
        var showMsg = document.getElementById("showMsg");

        areaDiv.onmousemove = function(){

            if(!event){
                event = window.event;
            }
           var x = event.clientX;
           var y = event.clientY;
           showMsg.innerHTML = "x="+x+", y="+y;

        }
        }
    </script>

实例二：div跟随鼠标移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: rosybrown;
            /* 开启定位才能移动 */
            position: absolute;
        }
    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            // 直接绑定给doument
            document.onmousemove =function(event){
                event = event || window.event;
                
                // 鼠标坐标
                /*
                使用clientX，有一个问题，clientX是相对于可见窗口的，
                所以鼠标也就相对于可见窗口，而div是相对于整个网页的，
                两者相对点不一样这就导致当夜页面下移的时候出现位差，
                所以应该使用相对于网页的pageX
                */
                // var left = event.clientX;
                // var top = event.clientY;
                var left = event.pageX;
                var top = event.pageY;
                
                //设置 box1的位置
                box1.style.left = left +"px";
                box1.style.top = top+ "px";

            }

        }

    </script>
  
</head>
<body style="height: 1000px;">
    <div id = "box1"></div>
    
</body>
</html>

效果：
在这里插入图片描述
问题：
IE8不支持pageX;
解决：通过计算改变距离。

完整实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: rosybrown;
            /* 开启定位才能移动 */
            position: absolute;
        }
    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            // 直接绑定给doument
            document.onmousemove =function(event){
                event = event || window.event;
                // 获取滚动条滚动距离
                // 滚动条是谁的？火狐认为是html的，chrome认为是body的
                // var scrollTop = document.body.scrollTop;
                // html：document.documentElement
                // var scrollTop = document.documentElement.scrollTop;
                var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
                var scrollLeft = document.body.scrollLeft||document.documentElement.scrollLeft;
            
                var left = event.clientX+scrollLeft;
                var top = event.clientY+scrollTop;
                
                //设置 box1的位置
                box1.style.left = left +"px";
                box1.style.top = top+ "px";

            }

        }

    </script>
  
</head>
<body style="height: 1000px;width: 2000px;">
    <div id = "box1"></div>
    
</body>
</html>