js-----鼠标事件 

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Keywords" content="" />
        <meta name="description" content="" />
        <title>事件</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            #box {
                width: 300px;
                height: 300px;
                background: skyblue;
            }
        </style>
    </head>
<body>

    <div id="box"></div>

<script>
    
    var box = document.getElementById("box");


    // 单击事件
    box.onclick = function() {
        alert("我被单击啦！");
    }

    // 鼠标划入  onmouseenter / onmouseover  鼠标划入事件
    box.onmouseover = function() {
        console.log("鼠标划入！");
    }

    // 鼠标划出  onmouseleave / onmouseout  鼠标划出事件
    box.onmouseout = function() {
        console.log("======划出======");
    }

    // 鼠标移动  onmousemove
    
    // 左键双击  ondblclick
    
    // 键盘按下某键  onkeydown
    
    // 键盘抬起某键  onkeyup
    
    // 失去焦点      onblur
    
    // 得到焦点      onfocus
    
    // 窗口大小被改变 onresize
    

    window.onresize = function() {
        console.log("窗口大小被改变啦！");
    }

    

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

 

posted @ 2018-12-13 11:20  小呆丶  阅读(330)  评论(0)  编辑  收藏  举报