javascript中的事件

1.定义      
            JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。
                   

2.窗口事件

	/*  当窗口失去焦点时 */
     window.onblur = function () {
         console.log('窗口失去了焦点！');
     }

    /*  当窗口获得焦点时 */
     window.onfocus = function () {
         console.log('窗口获得了焦点！');
     }
    /*  窗口加载完成后*/
     window.onload =function () {
         console.log("窗口加载完成！")
     }
    /*  窗口大小改变时 事件 */
     window.onresize = function () {
         console.log("窗口大小正在发送改变");
     }



     var userCode = document.getElementById("userCode");
    /*  获得焦点时 改变背景色 */
       userCode.onfocus = function () {
         this.style.backgroundColor = 'green';
      }

    /*  失去焦点时 改变背景色 */
      userCode.onblur = function () {
         this.style.backgroundColor = 'red';
      }

3.键盘事件

<div id="box" class="divStyle">
    
    
<script>
    //键盘按下事件
    window.onkeydown=function(event){
        //解决兼容问题
        event=event || window.event;
        console.log("键盘按下了" + event.keyCode);
        if(event.keyCode==13){
            console.log('按下了会回车键');
        }
    }
	
    //键盘按下事件 盒子移动
    var box=document.getElementById("box");
    document.onkeydown=function(event){
        event  = event || window.event;
        switch(event.keyCode){
            case 37:
                box.style.left=box.offsetLeft-10+'px';
                break;
            case  39:
                box.style.left = box.offsetLeft + 10+'px';
                break;
            case 38:
                box.style.top = box.offsetTop - 10+'px';
                break;
            case 40:
                box.style.top = box.offsetTop + 10+'px';
                break;
        }

    }
    /* onkeyup： 当松开按键时 触发 */
    window.onkeyup = function (event) {

        event = event || window.event;

        *
            if (event.keyCode == 13) {
                console.log('按下了回车');
            }
    }
    
    /* 键盘 按下并松开时*/
			    window.onkeypress = function (event) {
			        event = event || window.event;
			        console.log("键盘按下了" + event.keyCode);
			        if (event.keyCode == 13) {
			            console.log('按下了回车');
			        }
			    }
	</script>

4.鼠标事件

<div onmouseover="divMouseover()"
     onmouseout="divMouseout()"
     style="width: 300px;height: 300px;background: red">
    <div onmouseover="divMouseover()"
         onmouseout="divMouseout()"
         style="width: 100px;height: 100px;background: pink">
  </div>
</div>


<script>
     window.onclick = function () {
         console.log("鼠标单击事件");
     }

     window.ondblclick = function () {
         console.log("鼠标双击事件");
     }

     window.onmousedown = function () {
         console.log("当鼠标按钮按下运行时");
     }

     window.onmouseup = function () {
         console.log("当鼠标按钮运行时");
     }

    /* onmouseover 当鼠标移入时  不能阻止冒泡  */
    function divMouseover() {
        console.log("当鼠标进入了当前的DIV");
    }
    /* onmouseout : 当鼠标移出时  不能阻止冒泡*/
    function divMouseout() {
        console.log("当鼠标移出了当前的DIV");
    }
</script>

5.表单事件

<form action=" " method="get" id="myForm">
    <label>账号：</label> <input type="text" id="userCode" value="这是默认值"/> <br/><br/>
    <label>密码：</label> <input type="password" id="userPwd"/> <br/><br/>
    <input type="submit"/>
    <input type="reset" />
</form>




<script>

 var myForm = document.getElementById("myForm");

    /* 为表单绑定提交事件 */
    myForm.onsubmit = function () {
        let userCode = document.getElementById("userCode").value;
        let userPwd = document.getElementById("userPwd").value;
        var reg = /^[A-Za-z0-9]{6,12}$/;
        console.log("触发了表单的提交事件！");
        if (userCode == '') {
            alert("账号不能为空");
        } else if (userCode.length < 6 || userCode.length > 12) {
            alert("账号长度错误");
        } else if (!reg.test(userCode)) {
            alert("账号只能为字母与数字!");
        } else if (userPwd == '') {
            alert("密码不能为空");
        } else if (userPwd.length < 6 || userPwd.length > 12) {
            alert("密码长度错误");
        } else if (!reg.test(userPwd)) {
            alert("密码只能为字母与数字!");
        } else {
            return true;
        }
        // return true:可以提交  false 不能提交
        return false;
    }

</script>