首页 > 其他分享> > 2022/1/12，事件对象

2022/1/12，事件对象

2022-01-12 22:03:07 作者：互联网

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #areaDiv {
            border: 1px solid black;
            width: 300px;
            height: 50px;
            margin-bottom: 10px;
        }

        #showMsg {
            border: 1px solid black;
            width: 300px;
            height: 20px;
        }
    </style>


    <script type="text/javascript">

        window.onload=function(){

            //在areaDiv移动时候，在showMsg显示鼠标的坐标

            //获取两个div
            var areaDiv=document.getElementById("areaDiv");
            var showMsg=document.getElementById("showMsg");

            //onmousemove
            //  -该事件会在鼠标移动时候触发

            /*
            * 事件对象
            *       -当响应函数触发时候，浏览器每次都会将一个事件对象作为一个实参传进响应函数
            * clientX
            *       -可以获取鼠标移动时的水平坐标
            * clientY
            *       -可以获取鼠标移动时的垂直坐标
            * 语法：元素.clientX
            */
            areaDiv.onmousemove=function(event){
                //alert("我动了~~~");

                /*
                *ie8中，响应函数在被触发时，浏览器不会传递事件对象
                *在ie8以下的浏览器中，是将事件作为window对象的属性保存的
                * 
                *在showMsg显示坐标
                if(!event){
                    event=window.event;
                }
                */

                event=event||window.event;

                
                


                showMsg.innerHTML="(X="+event.clientX+","+"Y="+event.clientY+")";
            };

        };


    </script>
</head>

<body>
    <div id="areaDiv"></div>
    <div id="showMsg"></div>
</body>

</html>

标签：12,鼠标,对象,showMsg,window,2022,响应函数,areaDiv,event
来源： https://blog.csdn.net/weixin_44645655/article/details/122463259