<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        //点击事件
        function testClick(){
            console.log("Clicked");
        }
        //双击事件
        function testDblClick(){
            console.log("dblClick");
        }
        //当鼠标移动到某一个（DOM）对象上方的时候
        function testMouseOver(){
            console.log("over");
            //console.log(this.style.backgroundColor="green")
            document.getElementById("div").style.backgroundColor="green";
        }
        //表示鼠标在某一个（DOM）对象的上面移动的时候
        function testMouseMove(){
            console.log("move");
        }
        //从一个对象上面离开的时候
        function testMouseLeave(){
            console.log("leave")
            document.getElementById("div").style.backgroundColor="#fff";
        }
        //鼠标从一个对象上面离开的时候  Leave和out已经合并   可以直接使用out
        function testMouseOut(){
            console.log("out")
        }
        /**
         * onload与自执行函数：
         *      onload在文档加载完成以后执行
         *      自执行函数只要解析到  就会执行
         */
        onload = function () {
            console.log("onload");
        }
    </script>

    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            margin: 20px;
            border: 1px solid red;
        }
    </style>

</head>
<body>
<input type="button" onclick="testClick()" value="Click">
<input type="button" ondblclick="testDblClick()" value="dblclick">
<div onmouseover="testMouseOver()" id="div" onmouseleave="testMouseLeave()">
    Over
</div>
<div onmousemove="testMouseMove()" onmouseout="testMouseOut()">
    Move
</div>
</body>
</html>