2022/1/12，事件对象

2022-01-12 22:03:07 阅读：101 来源： 互联网

标签：12 鼠标对象 showMsg window 2022 响应函数 areaDiv event

<!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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2022/1/12，事件对象