JavaScript事件处理

最新推荐文章于 2025-08-13 21:05:35 发布

chaoyv

最新推荐文章于 2025-08-13 21:05:35 发布

阅读量105

点赞数

分类专栏： JSP 基础文章标签： javascript xhtml ViewUI

JSP 基础专栏收录该内容

90 篇文章

订阅专栏

本文介绍了JavaScript中的事件处理，包括页面加载与卸载事件、单击事件等，并演示了如何利用JavaScript读取和操作表单数据，同时展示了如何使用正则表达式验证表单输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本章目标
掌握JavaScript中的主要事件使用；
掌握JavaScript与表单的操作；
掌握正则表达式在JavaScript中的使用。

一个简单的事件处理程序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		function hello(){//定义函数
			alert("hello world");//打印欢迎信息
		}
		function byebye(){//定义函数
			alert("goodbye");
		}
    </script>
</head><!--完结标记-->
<body onload="hello();" onunload="byebye();"><!--网页主体-->
</body><!--完结标记-->
</html><!--完结标记-->
<!--onLoad:表示网页加载时要触发的事件，一旦触发事件后调用的是hello()函数。-->
<!--onUnLoad:表示关闭页面时要触发的事件，一旦触发事件后调用的是byebye()函数。-->

效果图：

单击事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		function fun(){//定义函数
			alert("Hello World!!!");//打印欢迎信息
		}
    </script>
</head><!--完结标记-->
<body><!--网页主体-->
<h3><a href="###" onclick="fun();">按我吧！</a></h3><!--增加单击事件-->
</body><!--完结标记-->
</html><!--完结标记-->

效果图：

JavaScript与文本框的互操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		function show(){//定义函数
			var value=document.myform.textName.value;//取得输入的内容
			alert("输入的内容是："+value);//打印信息
		}
    </script>
</head><!--完结标记-->
<body><!--网页主体-->
<form action="" method="post" name="myform"><!--表单开始标记-->
请输入内容：<input type="text" name="textName" /><!--定义文本框-->
<input type="button" value="显示" onclick="show();" /><!--显示内容-->
</form><!--表单结束标记-->
</body><!--完结标记-->
</html><!--完结标记-->

效果图：

JavaScript使用正则表达式
在JavaScript之中也可以使用正则表达式对输入的数据进行正则验证，格式如下所示：
/正则表达式/.test(验证的内容)

进行email输入的提交验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		function validate(f){//定义函数，此时f就表示myform
			var value=f.email.value;//取得输入的内容
			if(!/^\w+@\w+.\w+$/.test(value)){//对输入的内容验证
				alert("Email输入格式不正确！");//弹出警告框
				f.email.focus();//让焦点定位到email框
				f.email.select();//选择全部内容
				return false;//返回false，表单不提交
			}
			alert("Email输入格式正确！");//弹出提示框
			return true;//返回true，表单提交
		}
    </script>
</head><!--完结标记-->
<body><!--网页主体-->
<!--表单开始标记，调用validate()函数进行验证，其中的this表示当前元素，即此表单-->
<form action="" method="post" name="myform" onsubmit="return validate(this);">
Email：<input type="text" name="email" /><!--定义文本框-->
<input type="submit" value="提交" /><!--显示内容-->
</form><!--表单结束标记-->
</body><!--完结标记-->
</html><!--完结标记-->

效果图：

操作单选钮和复选框 —— A

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		function show(){//定义函数
			var name=document.myform.name.value;//取得name的输入内容
			alert("姓名："+name);
			var sex;//保存性别
			if(document.myform.sex[0].checked){//如果第一个元素被选中
				sex=document.myform.sex[0].value;
			}else{
				sex=document.myform.sex[1].value;
			}
			alert("性别："+sex);
			var inst="";//保存兴趣
			for(i=0;i<document.myform.inst.length;i++){//保护兴趣
				if(document.myform.inst[i].checked){//判断是否被选中
					inst+=document.myform.inst[i].value+"、";
				}
			}
			alert("兴趣："+inst);
		}
    </script>
</head><!--完结标记-->
<body><!--网页主体-->
<form action="" method="post" name="myform"><!--表单开始标记-->
姓名：<input type="text" name="name" /><br />
性别：<input type="radio" name="sex" value="男" checked="checked" />男
	 <input type="radio" name="sex" value="女" />女<br />
兴趣：<input type="checkbox" name="inst" value="唱歌" />唱歌
	 <input type="checkbox" name="inst" value="游泳" />游泳
     <input type="checkbox" name="inst" value="跳舞" />跳舞
     <input type="checkbox" name="inst" value="编程" checked="checked" />编程
     <input type="checkbox" name="inst" value="上网" />上网<br />
<input type="button" value="显示" onclick="show();" />
</form><!--表单结束标记-->
</body><!--完结标记-->
</html><!--完结标记-->

效果图：

操作单选钮和复选框 —— B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		function show(val){//定义函数
			document.myform.result.value=val;//修改文本框的显示
		}
    </script>
</head><!--完结标记-->
<body><!--网页主体-->
<form action="" method="post" name="myform"><!--表单开始标记-->
部门：<select name="dept" onchange="show(this.value)">
		<option value="技术部">技术部</option>
        <option value="销售部">销售部</option>
        <option value="财务部">财务部</option>
    </select>
结果：<input type="text" name="result" value="" />
</form><!--表单结束标记-->
</body><!--完结标记-->
</html><!--完结标记-->

效果图：

小结
JavaScript的事件命名以“onXxx”的形式出现；
事件一旦触发之后可以通过函数进行相应的处理；
在进行表单验证的时候也可以使用正则表达式完成。