三十三.DOM事件（event）

JavaScript与HTML之间的交互式事件

onclick  //鼠标点击元素
onfocus  
onblur   
onmouseover  //鼠标移到某元素之上
onmouseout  //鼠标从某元素移开
onload页面加载时触发
onchange域的内容改变时发生
onsubmit//表单中的确认按钮被点击时发生
//有事件一定有对应一个处理结果，用函数表示
onresize//浏览器的尺寸发生改变
onscroll //窗口滚动
onchange事件支持的标签input,select,textarea

内联事件

<button id="btn" onclick="go()">btn</button>

/*内联事件
        */
        function go(){
            console.log("hello world")
        }

1.onmouseover：事件会在鼠标指针移动到指定的元素上时发生

<p id="p">hello world</p>
    <script>
        var p=document.getElementById("p");
        p.onmouseover=function(){
            this.style.backgroundColor="pink";
        }
    </script>

2.onmouseout ：事件会在鼠标指针移出指定的元素外时发生

<p id="p">hello world</p>
    <script>
        var p=document.getElementById("p");
        p.onmouseout=function(){
            this.style.backgroundColor="yellow";
        }
    </script>

3.onfoucs :事件在对象获得焦点时发生

<input type="text" id="input">
    <script>
        var input=document.getElementById("input");
        input.onfocus=function(){
            input.style.backgroundColor="red"
        }
    </script>

4.onblur:事件会在对象失去焦点时发生

<input type="text" id="input">
    <script>
        var input=document.getElementById("input");
        input.onblur=function(){
            input.style.backgroundColor="pink"
        }
    </script>

5.onload:事件会在页面或图像加载完成后立即发生

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

6.onchange ：当输入框内容发生改变时触发

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

——>——>

7.onresize:当窗口大小发生变化时触发

 //onresize，当窗口大小发生变化时触发
        window.onresize=function(){
            console.log(1);
        }

8.onscroll：当滚动滚动条时触发

 //当滚动滚动条时触发
        window.onscroll=function(){
            console.log(2);
        }

9.onsubmit：事件在表单提交时触发

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

键盘事件与KeyCode属性

onkeydown:用户按下一个键盘按键时发生
onkeypress:在键盘按键按下并释放一个键时发生
onkeyup:在键盘按键松开时发生
keyCode:返回onkeypress，onkeydown或onkeyup事件触发的键的值的字符代码，或键的代码
even.key:获取输入的值
even.keyCode:获取输入值的值

10.onkeydown

<input type="text" id="input">
    <script>
        //even.key:获取输入的值
        //even.keyCode:获取输入值的值
        var input=document.getElementById("input");
        input.onkeydown=function(even) {
            console.log(even.key)
            console.log(even.keyCode);
            if(even.keyCode==82) {
                console.log("放大招");
            }
        }
    </script>

11.textarea文本区域

<p>还可以输入<em id="em" style="color: red;">0</em>/10</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(length<=10) {
                em.innerHTML=this.value.length;
            }else {
                alert("超出限制");
            }
        }
    </script>