Java Script事件有哪些？

一、事件的注册：

        事件：可以在触发浏览器的行为，当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，这个事件对象中封装了当前事件的相关信息。

什么是事件的注册(绑定)？

        就是告诉浏览器，当事件响应后要执行哪些操作代码，这就叫做事件的注册或事件的绑定。

1.静态注册事件：

        通过html标签的事件属性直接赋予事件响应后的代码，称为静态注册。

2.动态注册事件：

        通过js代码得到标签的dom对象，再通过  dom对象.事件名  =  function(){}形式赋予事件响应后的代码，称为动态注册。

动态注册步骤有以下几步：       

        1.获取对应的标签对象；

        2.标签对象.事件名 = function(){} 和onload加载完成事件结合，onload的动态注册才实现了后续其它事件的动态注册。

 eg:
     标签对象.事件名 = function () {
         console.log("请您完成表单的内容!");
     }

         以下是一些常见的事件：

二、窗口事件

        1.失去焦点事件(onblur)

当窗口失去焦点时   
    window.onblur = function () {
        console.log('窗口失去了焦点！');
    }
    当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，
引发该文件，他与onFocas事件是一个对应的关系。 

        2.获得焦点事件(onfocus)        

  当窗口获得焦点时 
     window.onfocus = function () {
         console.log('窗口获得了焦点！');
     }
当用户单击Text或textarea以及select对象时，产生该事件。

        3.窗口加载完成后事件(onload)

窗口加载完成后
    window.onload =function () {
        console.log("窗口加载完成！")
    }
当文档载入时，产生该事件。

        4.窗口大小改变事件(onresize)

窗口大小改变时 事件 */
    window.onresize = function () {
        console.log("窗口大小正在发送改变");
    }
窗口的尺寸大小发生改变时，触发该事件。

三、表单事件

        创建一个form表单 ：

<form action="5.数组.html" 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>


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

        1.内容改变事件(onchange)

内容改变事件：
    userCode.onchange = function () {
        console.log(userCode.value);
    }
    当利用text或textarea元素输入字符值改变时发该事件，
同时当在select表格项中一个选项状态改变后也会引发该事件。

        2.文本框内容改变时，立即将内容输出在控制台事件(oninput)

文本框内容改变事件：
     userCode.oninput = function () {
         console.log(userCode.value);
     }
oninput 当文本框内容改变时 ，立即将改变内容 输出在控制台

        3.获取表单 未能提交时事件(oninvalid)

获取表单 未能提交时
     userCode.oninvalid = function () {
         console.log("请您完成表单的内容!");
     }

        4.文本框被选中时事件(onselect)

 当文本框内容被选中时 
    userCode.onselect = function () {
        console.log("您已经选择了文本框!");
    }
当Text或Textarea对象中的文字被加亮后，引发该事件。 

四、键盘事件

        1.键盘按下事件(onkeydown)

/!*  键盘按下事件 *!/
    window.onkeydown = function (event) {
        /!* 解决兼容问题 *!/
        event = event || window.event;
        console.log("键盘按下了" + event.keyCode);
        if (event.keyCode == 13) {
            console.log('按下了回车');
        }
}
当我们在键盘上按下回车键时，会在控制台输出'按下了回车'这条语句。

        2.键盘松开事件（松开时触发）(onkeyup)

window.onkeyup = function (event) {
    event = event || window.event;
    console.log("键盘按下了" + event.keyCode);
    if (event.keyCode == 13) {
        console.log('按下了回车');
    }
}
松开键盘按键时触发该事件。

        3.键盘按下并松开时事件(onkeypress)

window.onkeypress = function (event) {
    event = event || window.event;
    console.log("键盘按下了" + event.keyCode);
    if (event.keyCode == 13) {
        console.log('按下了回车');
    }
}

          4.  小案例:创建一个div块通过键盘事件设置可以操作div块的移动；

                1.先设置div块的大小、颜色等参数；

                2.给键盘上的按键赋予及键盘参数；

                3.控制设置的键盘按键实现div块的移动。

<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .divStyle {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
</style>
-------------------------------------------
<div id="box" ></div>

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;
    }
}

五、鼠标事件

        1.鼠标单击事件(onclick)

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

        2.鼠标双击事件(ondblclick)

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

        3.鼠标按钮按下运行时事件(onmousedown)

        4.鼠标移入时事件(onmouseover)

        5.鼠标移出时事件(onmouseout)

    <div id="box" style="width: 100px;height: 100px;background: aqua;"></div>
	<script>
		var box = document.getElementById("box");

        /*当鼠标移入时div块颜色变为红色*/
		box.onmouseover = function () {
			this.style.background = 'red';
		}

        /*当鼠标移出时div块颜色变为*/
		box.onmouseout = function () {
			this.style.background = 'greenyellow';
		}
	</script>

        6.鼠标移入事件(onmouseenter)

        7.鼠标移出事件(onmouseleave)

        对于移入移出事件来说，onmouseover与onmouseout事件不能阻止冒泡情况的发生，所以一般使用onmouseenter和onmouseleave代替，可以有效的防止发生冒泡。

        例如：

<div onmouseenter="divMouseenter()"
     onmouseleave="divMouseleave()"
     style="width: 300px;height: 300px;background: red">
    <div onmouseenter="divMouseenter()"
         onmouseleave="divMouseleave()"
         style="width: 100px;height: 100px;background: pink">
    </div>
</div>
-------------------------------------------------------------------------
<script>
    function divMouseenter() {
        console.log("当鼠标进入了当前的DIV");
    }
    function divMouseleave() {
        console.log("当鼠标移出了当前的DIV");
    }
</script>

        8.滚动元素滚动条时触发的事件(onscroll)

        9.鼠标滚轮滚动事件(onmousewheel)