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>
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出