JavaScript中常用事件的类型
1.表单事件
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>密 码：<input type="password"></li>
<li><input type="submit" value="提交"><input type="reset" value="重置"></li>
</ul>
</form>
</body>
2.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>
3.焦点事件
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>
4.鼠标事件
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>
5.键盘事件
1).keydown：可响应所有键按下
2).keyup：只响应字符键按下
3).keypress：键盘弹起
注： 键盘事件在web开发应用比较少，在游戏开发中用的比较多
核心代码演示：
<script>
window.onload = function () {
document.onkeydown = function () {
console.info("键盘按下去了！")
}
document.onkeyup = function () {
console.innfo("键盘抬起来了")
}
}
</script>
注： 本文为个人学习笔记，如有不当，还望留言更正，共同学习进步。
