71 详解2

00

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            /*
                事件对象
                    当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息。
                    包括导致事件的元素、事件的类型、以及其他与特定事件相关的信息。

                    通过事件绑定的执行函数是可以得到一个隐藏参数的。
                    说明，浏览器会自动分配一个参数，这个参数其实就是event对象。

                Event对象的获取方式     （X, Y轴）
                e.clientX, e.clientY    相对于当前鼠标距离页面"左"边距和"顶"边距  （相对位置）
                e.pageX, e.pageY    点击位置距离当前浏览器内容可视区域的x, y坐标，该参照点会随着滚动条的移动而移动  （绝对位置）
                e.offsetX, e.offsetY    相对于带有定位的父盒子（事件源）的x, y坐标， 盒内坐标   （相对位置） 
                
            */
        </script>

        <style>
            div{
                width: 200px;
                height: 2000px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="test"></div>
        
        <script>
            var oDiv = document.getElementById("test")
            oDiv.onclick = function(e){
                var evt = e || event
                console.log(evt.clientX, evt.clientY)
                console.log(evt.pageX, evt.pageY)
                console.log(evt.offsetX, evt.offsetY)
            }
        </script>
    </body>
</html>

01

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>光标实时位置</title>
        <style>
            div{
                position: relative;
                width: 500px;
                height: 500px;
                border: 1px solid #cecece;
            }
            span{
                position: absolute;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div>
            <span></span>
        </div>
        <script>
            var oDiv = document.getElementsByTagName("div")[0]
            var oSpan = oDiv.children[0]
            oDiv.onmousemove = function(e){
                var evt = e || event
                var x = evt.clientX
                var y = evt.clientY
                oSpan.innerHTML = x + "," + y + "px"
            }
            oDiv.onmouseout = function(e){
                oSpan.innerHTML = ""
            }
        </script>
    </body>
</html>