四、事件

一、鼠标事件

onClick(鼠标单击)

all[i].onclick=function(){
                //this 在事件中，谁执行事件，this就指谁
                this.style.display="none";//点击元素消失
            }

ondbclick(鼠标双击)，

onmousedown(鼠标按下未抬起)

onmouseup(鼠标抬起)，

onmousemove(鼠标移动) onmouseover(鼠标移入)

var p =  document.getElementById("p");
        p.onmouseover = function(){
            this.style.background = "red"
        }
        p.onmouseout =  function(){
            this.style.background = "green"
        }

onmouseout(鼠标移出)

onmouseenter(鼠标移入)

onmouseleave(鼠标移出)

注意：onmouseover与onmouseenter的区别：前者若有子级元素，它会把事件传递给子级元素,而后者不会！！！

二、键盘事件

2-1、onkeydown(键盘按下，键盘未抬起事件会一直触发)

 <input type="text" id = "input">
 var input  = document.getElementById("input");
 input.onkeydown = function(event){
            console.log(event.keyCode)
            if(event.keyCode == 82){
                console.log("放下")
            }
        }

2-2、onkeyup(键盘抬起)

 <input type="text" id = "input">
 var input  = document.getElementById("input");
input.onkeyup = function(){
            console.log("放开")
        }

2-3、onkeypress(键盘按下数字键货子母键触发，功能键除外(上下左右，ctrl，shift，alt))

 <input type="text" id = "input">
 var input  = document.getElementById("input");
 input.onkeypress =  function(){
            console.log("press")
        }

三、焦点事件

3-3、onfocus(有焦点的元素获取到焦点时触发，用tab键也会触发这个事件)

3-4、onblur(有焦点的元素失去焦点时触发)

<input id="app" type="text">
    <script>
        /* 

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

四、输入框有关的事件

4-1、onchange(输入框内容改变时触发）

 <input type="text" id="input">

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

        // 当输入框内容发生改变的时候触发
        input.onchange=function(){
            console.log("hello")
        }
    </script>

4-2、onsubmit(事件在表单提交时触发)

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

五、窗口有关的事件

5-1、onresize (窗口大小改变的时候触发)

// 窗口大小改变的时候触发
        window.onresize=function(){
            console.log("1");
        }

5-2、onscroll (窗口滚动时触发)

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

5-3、onload (页面在加载完毕之后才会触发)

HTML

<p id="p">hello world</p>


JavaScript
window.onload=function(){
    var p=document.getElementById("p");
    p.onclick=function(){
        console.log("113");
    }
}