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>
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>
最后
总结不易,希望小宝们不要嫌弃哦!