lovecoding
/
W0407


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
							<!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 {
            width: 500px;
            height: 500px;
            background: #f00;
        }
        #box1 {
            width: 200px;
            height: 200px;
            background: #ff0;
        }
    </style>
</head>

<body>
    <div>
        <div id="box">
            <div id="box1"></div>
        </div>
        <input type="text">
    </div>
    <script>
        var box = document.getElementById("box");
        var inp = document.querySelector("input");

        inp.onkeydown = function(event) {
            console.log("按下",event)
        }
        inp.onkeyup = function() {
            console.log("抬起")
        }
        inp.onkeypress = function() {
            console.log("触发")
        }
        // 点击
        // box.onclick = function () {
        //     console.log("box")
        // }
        // box1.onclick = function () {
        //     console.log("box1")
        //     // 冒泡事件
        // }
        // box.ondblclick = function () {
        //     console.log("双击")
        // }
        box.onmousedown = function() {
            console.log("鼠标按下")
        }
        box.onmousemove = function() {
            console.log("鼠标划过")
        }
        box.onmouseup = function() {
            console.log("鼠标抬起")
        }
        box.onmouseout = function() {
            console.log("鼠标划出")
        }
        box.onmouseover = function() {
            console.log("当鼠标移动到某个对象范围上方时触发事件")
        }


    </script>
</body>

</html>