lovecoding
/
web0715


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">hello</div>
    <script>
        var oBox = document.getElementsByClassName("box")[0];
        
        // 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>