JavaScript中常见的事件函数

js的事件在实际项目中是用的非常多的，今天，总结一下基本并且常用的事件函数：

1. 鼠标事件：
           onclick: 点击事件
           ondblclick: 双击事件

           onmouseover: 鼠标进入“某对象区域”
           onmouseout: 鼠标离开“某对象区域”

           onmousedown: 鼠标按下
           onmouseup: 鼠标抬起
           onmousemove: 鼠标移动。
2. 表单事件：
           onsubmit：表单提交事件

           onfocus：一个表单项获得焦点。（就是鼠标在输入框中点击，可以输入内容）
           onblur: 一个表单项失去焦点。（就是鼠标离开输入框，在别的元素发生鼠标事件）

           onchange: 一个表单项的内容的改变（通常用于select选项值的改变）
           onreset:    表单重置事件
3. 键盘事件：
       onkeydown：按键按下去（尚未抬起来）
           onkeyup：   按钮抬起来。
           onkeypress:    按键一次(不包含功能键，比如退格键、回车键)。
4.窗口事件：
           onload: 网页一打开时发生——准确点说，是网页加载完毕时发生。
       onunload：卸载

使用实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 300px;
				height: 200px;
				text-align: center;
				background: orangered;
				font: 30px/25px "微软雅黑";
				color: white;
			}
		</style>
	</head>
	<body onload="alert('欢迎光临!')">
		<!--双击-->
		<input type="button" id="btn1" value="双击我" ondblclick="f1();" />
		<!--移入和移出-->
		<div id="box1" onmouseover="f2();" onmouseout="f3(this);">
			我是默认的文字
		</div>
		<!--获取焦点和失去焦点-->
		<form action="" method="post">
			<input type="text" id="userName" value="请输入用户名" onfocus="this.value='';" onblur="userCheck();" onkeyup="alert(event.keyCode);" />
			<!--当选项发生改变时-->
			籍贯：
			<select onchange="alert(this.value);">
				<option>请选择</option>
				<option>四川省</option>
				<option>重庆市</option>
				<option>云南省</option>
			</select>
			<input type="submit" value="提交"/>
		</form>
		<input type="button" id="" value="关闭窗口" onclick="window.close();" />
		<script type="text/javascript">
			function f1() {
				var b1=document.getElementById("btn1");
				b1.style.fontSize="50px";
			}
			
			function f2() {
				var box1=document.getElementById("box1");
				box1.innerHTML="发发发!";
			}
			
			function f3(bianliang) {
				//var box1=document.getElementById("box1");
				//box1.innerHTML="我是默认的文字!";
				bianliang.innerHTML="我是默认的文字!";
				
				//this表示一个对象自己（元素节点对象）
			}
			
			//语句少可以直接写在事件上面，语句多最好定义成函数，在通过事件调用函数
			
			//this.value==''?this.value='请输入用户名':'';
			function userCheck() {
				var yhm=document.getElementById("userName");
				if(yhm.value=="")
				{
					yhm.value="请输入用户名";
				}
			}
		</script>
	</body>
</html>

简单的表单验证：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="d1">
			<form action="dataForm.html" method="post" onsubmit="return checkForm();">
				<p>用户账号：<input type="text" id="yhm" /><span>用户名长度6~18位</span></p>
				<p>登录密码：<input type="password" id="pwd" /><span>密码长度6~12位</span></p>
				<p><input type="submit" value="登 录" /></p>
			</form>
		</div>
		<script type="text/javascript">
			//表单验证的思路
			//如果用户提交的数据合法就允许提交到后台，否则就阻止提交表单。
			//1 提交表单的事件？onsubmit
			//提交表单是就应该调用一个验证数据合法性的函数
			//onsubmit="checkForm();"
			//return checkForm(); 就是把验证数据的结果进行返回
			
			//2 写验证函数
			function checkForm() {
				var yhm=document.getElementById("yhm");
				var pwd=document.getElementById("pwd");
				
				if(yhm.value=="")
				{
					alert("请输入用户名!");
					yhm.focus(); //获取用户名的焦点
					return false; //阻止提交
				}
				else if(yhm.value.length<6 || yhm.value.length>18)
				{
					alert("用户名长度必须在6~18位之间!");
					yhm.focus(); //获取用户名的焦点
					return false; //阻止提交
				}
				else if(pwd.value=="")
				{
					alert("请输入密码!");
					pwd.focus(); //获取用户名的焦点
					return false; //阻止提交
				}
				else if(pwd.value.length<6 || pwd.value.length>12)
				{
					alert("密码长度必须在6~12位之间!");
					pwd.focus(); //获取用户名的焦点
					return false; //阻止提交
				}
				//如果还有很多表单项目，照此方法依次验证
			}
		</script>
	</body>
</html>

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出

JavaScript中常见的事件函数

猜你喜欢