JavaScript常用事件的类型演示

(一).表单事件

1).submit:提交

2).reset：重置

3).change：内容改变且失去焦点时触发

4).input：内容改变时触发（兼容性不好）

注： submit和reset通常是绑定到form表单中使用的,change通常用于input和selcet表单中

<script>window.onload = function () {var form = document.getElementsByTagName("form")[0]form.onsubmit = function () {alert("submit事件已触发")//阻止默认提交事件return false;}form.onreset = function () {alert("reset事件已触发")//阻止默认提交事件return false;}form.onchange = function () {alert("change事件已触发")}form.oninput = function () {console.info("input事件已触发")}}
</script>
<body>
<form method="get" action=""><ul><li>用户名：<input type="text"></li><li>密&nbsp;&nbsp;码：<input type="password"></li><li><input type="submit" value="提交"><input type="reset" value="重置"></li></ul>
</form>
</body>

(二).UI事件

1).load:页面加载完毕后触发
2).unload：页面卸载时触发（没啥意义）
3).beforeunload：页面卸载前触发
4).select：选中时触发，通常应用于input
5).resize：窗口大小改变时触发，一般绑定在window
6).scroll:有滚动时触发，一般绑定在window
核心代码演示：

<script>window.onload = function () {var input = document.getElementsByTagName("input")[0]input.onselect =function(){alert("文本被选中了")}window.onresize = function () {alert("窗口大小发生了改变！")}window.onscroll = function () {console.info("窗口滚动中......")}}</script><body><input type="text"></body>

(四).鼠标事件

1).focus: 获取焦点

应用：光标定位输入框输入内容
2).blur：失去焦点

应用：输入框输入内容的局部刷新
核心代码演示：

<script>window.onload = function () {// 获取输入框var input = document.getElementsByTagName("input")[0]// 为input注册事件input.onfocus = function () {alert("input输入框获得了焦点！！")}input.onblur = function () {alert("input输入框失去了焦点！！")}}
</script>
<body>
<input type="text">
</body>

(五).键盘事件

1).click：鼠标点击
2).mouseover：鼠标悬停
3).mouseout：鼠标离开
4).mousedown：鼠标按下
5).mouseup：鼠标抬起
6).mousemove：鼠标移动

注：鼠标事件应用比较多
核心代码演示：

<script>window.onload = function () {//获取元素,测试功能时请注释其他功能var btn = document.getElementsByTagName("input")[0]btn.onclick = function () {alert("鼠标点击")}btn.onmousemove = function () {alert("鼠标悬停")}btn.onmouseout = function () {alert("鼠标离开")}btn.onmousedown = function () {alert("鼠标按下")}btn.onmousedup = function () {alert("鼠标抬起")} btn.onmousemove = function () {alert("鼠标移动")}}
</script>
<body>
<input type="button" value="鼠标事件">
</body>