2.DOM事件

点击事件onclick

2-1输入框事件

onfocus 获取焦点
onblur 遗失焦点

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

onchange 当域的内容发生改变的时候会触发（onchange事件支持的标签input,select,textarea）

<input id="input" type="text">
    <script> 
    var input =document.getElementById("input");
    //当输入框的内容发生改变的时候会触发
    input.onchange=function(){
        console.log("hello")
    }
    </script>

2-2鼠标事件

onmouseover鼠标悬停在元素上的时候触发
onmouseout 鼠标移开的时候触发

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

2-3窗口事件

onresize 窗口大小改变，会触发

//窗口大小改变，会触发
    window.onresize=function(){
        console.log(1)
    }

onscroll 窗口滚动触发

 //窗口滚动触发
    window.onscroll=function(){
        console.log(2)
    }

onload页面加载时触发

 <p id="p">
        hello
    </p>
    <script>
        window.onload = function () {
            var p = document.getElementById("p");
            p.onclick = function () {
                console.log("hello")
            }
        }
    </script>

2-4onsubmit事件（表单）

表单中的确认按钮被点击时发生

<form id="form" onsubmit="alert(1)">
        <p>
            用户名:<input type="text" id="name">
        </p>
        <p>
            用户名:<input type="password" id="pwd">
        </p>
        <input id="submit" type="submit">
    </form>

2-5键盘事件

onkeydown:用户按下一个键盘按键时发生
onkeypress:在键盘按键按下并释放一个键时发生
onkeyup:在键盘按键松开时发生

<input type="text" id="input">
    <script>
        //event.key获取按下键盘对应于的值
        //enent.keyCode 13回车
        //r 82
        var input=document.getElementById("input");
        input.onkeydown=function(){
            console.log(event.keyCode)
            if(event.keyCode==82){
                console.log("发大招")
            }
        }
        input.onkeypress=function(){
            console.log("press")
        }
        input.onkeyup=function(){
            console.log("放开")
        }
    </script>

keyCode:返回onkeypress，onkeydown或onkeyup事件触发的键的值的字符代码，或键的代码

  <input type="text" id="input">
    <script>
        //element.value的获取
        var input=document.getElementById("input");
        input.onkeyup=function(event){
            if(event.keyCode==13){
                console.log(this.value)
            }
        }
    </script>

练习

<p>还可以输入<em id="em" style="color:red;">0</em>/150</p>
    <textarea id="txt" cols="30" rows="10"></textarea>
    <script>
        var txt = document.getElementById("txt");
        var em = document.getElementById("em");
        txt.onkeydown = function () {
            var length = this.value.length;
            if (em.innerHTML < 20) {
                em.innerHTML = this.value.length;
            }
            else {
                alert("不能再输入")
            }
        }
    </script>