lovecoding
/
web0715


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: fixed;
            top:200px;
            left: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">hello</div>
    <script>
        var oBox = document.getElementsByClassName("box")[0];
        
        oBox.onclick = function(){
            console.log(oBox.offsetLeft);
            console.log(oBox.offsetTop);
        }
        // function foo(){
        //     console.log("click");
        //     // removeEventListener 移除事件 接受两个参数 第一个事件名称，第二个是事件处理函数（绑定和移除的必须是同一个函数，用匿名函数不可以）
        //     oBox.removeEventListener("click",foo);
        // }

        // oBox.addEventListener("click",foo)

        
        // oBox.onclick = function(){
        //     console.log(this.innerText);
        // }


        /* 
            addEventListener绑定事件
            接受两个参数 第一个是事件名称如：click、mouseenter... (注意：不用加 on)
        */
        // oBox.addEventListener("click",function(){
        //     console.log(this.innerText);
        // })
        
        // oBox.addEventListener("mouseenter",function(){
        //     console.log(this.innerText);
        // })
        var oHtml = document.documentElement;
        // 鼠标按下事件
        // oHtml.onmousedown = function(){
        //     console.log("down")
        // }
        // 鼠标移动事件
        // oHtml.onmousemove =function(){
        //     console.log("move")
        // }
        // 鼠标抬起事件
        // oHtml.onmouseup = function(){
        //     console.log("up");
        // }

        function foo(e){
            console.log(e.clientX,e.clientY)
        }
        // oHtml.addEventListener("mousedown",function(){
        //     oHtml.addEventListener("mousemove",foo)
        //     oHtml.addEventListener("mouseup",function(){
        //         oHtml.removeEventListener("mousemove",foo)
        //     })
        // })

        // oHtml.onmousedown = function(){
        //     oHtml.onmousemove = function(e){
        //         console.log(e.clientX,e.clientY)
        //     }
        //     oHtml.onmouseup = function(){
        //         oHtml.onmousemove = null;
        //     }
        // }

        
    </script>
</body>
</html>