js事件入门（4）
2019-12-18 本文已影响0人
螺钉课堂
4.表单事件
表单事件处理主要用来验证表单，可以处理用户在表单上所做的任何操作。
#4.1.onsubmit事件
当用户点击submit按钮来提交表单时，就会触发onsubmit事件，如果事件处理程序返回一个false，就会阻止表单提交，表单就不会发送数据到服务器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var oForm = document.getElementsByTagName("form")[0];
//表单提交到时候，弹出一个1，然后返回false阻止表单提交
oForm.onsubmit = function(){
alert(1);
//如果最后返回的是true 表单会提交到服务器
return false;
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<input type="submit" value="提交"/>
</form>
</body>
</html>
#4.2.onchange
修改表单字段的时候触发该事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('chk');
//选中或者去掉选中状态的时候触发
oInput.onchange = function(){
alert(1);
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<input type="checkbox" name="" id="chk" value="" />
</form>
</body>
</html>
#4.3.onfocus 获取焦点事件
当获取到焦点到时候触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('txt');
//获取焦点的时候，将文本框的内容清空
oInput.onfocus= function(){
oInput.value = "";
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<input type="text" name="" id="txt" value="请输入用户名" />
</form>
</body>
</html>
#4.4.onblur失去焦点事件
当失去焦点的时候触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('txt');
//失去焦点的时候给文本框加默认值
oInput.onblur= function(){
oInput.value = "请输入用户名";
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<input type="text" name="" id="txt" value="" />
</form>
</body>
</html>
螺钉课堂视频课程地址：http://edu.nodeing.com
