4.1 焦点

        <!-- 焦点 -->
    <input type="text" id="app">
    <script>
        var app =document.getElementById("app");
        // 获取焦点
        app.onfocus = function(){
            this.style.backgroundColor = "red";
        }
        // 遗失焦点
        app.onblur = function (){
            this.style.backgroundColor = "yellow";
        }
    </script>

4.2 鼠标

    <!-- 鼠标 -->
    <p id="p2">hello world</p>
    <script>
        /* 
        mouseover  鼠标悬停在元素上的时候触发
        mouseout  鼠标移开的时候触发
         */
        var p2 =  document.getElementById("p2");
        p2.onmouseover = function(){
            this.style.background = "red"
        }
        p2.onmouseout =  function(){
            this.style.background = "green"
        }
    </script>

4.3 键盘

    <!-- 键盘 -->
    <input type="text" id="input3">
    <script>
        var input3 = document.getElementById("input3")
        input3.onkeydown = function(){
            console.log(event.keyCode)
            if(event.keyCode == 82){
                // alert("down")
                console.log("down")
            }
        },
        input3.onkeyup = function(event){
            console.log(event.keyCode)
            if(event.keyCode == 82){
                // alert("up")
                console.log("up")
            }
        },
        // 在down和up的中间时间执行
        input3.onkeypress = function(){
            console.log(event.keyCode)
            if(event.keyCode == 82){
                // alert("press")
                console.log("press")
            }
        }
    </script>

4.4 窗口

    <!-- 窗口事件 -->    
        <input type="text" id="demo4">
    <script>
        //输入框内容变化,  要按回车才触发
        var input3 = document.getElementById("demo4");
        input3.onchange = function(){
            console.log("onchange")
        }
        // 窗口大小改变触发
        window.onresize = function(){
            console.log("onresize")
        }
        // 窗口滚动触发
        window.onscroll = function(){
            console.log("onscroll")
        }
    </script>

4.5 提交 onsubmit

    <!-- 提交 onsubmit -->
    <form action="" id="form" onsubmit="alert(1)">
        <p>
            用户名：<input type="text" name="user">
        </p>
        <p>
            密码：<input type="text" name="password">
        </p>
        <input type="submit">
    </form>

4.6 监听输入的值value

    <!-- 监听输入的值 Value -->
    <p>还可以输入 <em id="emValue" style="color: red;">0</em>/30</p>
    <textarea name="" id="txtValue" cols="30" rows="10"></textarea>
    <script>
        var txtValue = document.getElementById("txtValue");
        var emValue = document.getElementById("emValue");
        txtValue.onkeydown = function(){
            var length = this.value.length;
            if(length<=30){
                emValue.innerHTML =  this.value.length;
            }else{
                alert("只能输入30个字符");
            }
            // if(event.keyCode == 13){
            //     console.log(this.value)
            // }    
        }
    </script>