machinecat520
/
zj-Exercise


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
							<!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>
        #areaDiv {
            border: 1px solid black;
            width: 300px;
            height: 50px;
            margin-bottom: 10px;
        }

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

        window.onload = function () {
            /**
             * 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
            */

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

            /**
             * onmousemove
             *  -该事件将会在鼠标在元素中移动时被触发
             * 
             * 事件对象
             *  -当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
             *      在事件对象中，封装了当前事件相关的一切信息，
             *      比如：鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动的方向、……
            */

            areaDiv.onmousemove = function (event) {
                // alert("鼠标移动了");
                // alert(event);
                /**
                 * 在IE8中，响应函数被触发时，浏览器不会传递事件对象
                 *  在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
                */

                // if(!event){
                //     event = window.event;
                // }


                //解决事件对象的兼容性问题
                //可以写成下面的方式，显得更简洁
                event = event || window.event;

                /**
                 * clientx  可以获取鼠标指针的水平坐标
                 * clienty  可以获取鼠标指针的垂直坐标
                */

                var x = event.clientX;
                var y = event.clientY;
                // alert("x="+x+",y="+y);

                //在showMsg中显示鼠标的坐标
                showMsg.innerHTML = "x=" + x + ",y=" + y;


            };

        };

    </script>
</head>

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

</html>