JavaWeb - JavaScript事件

最新推荐文章于 2024-04-12 16:19:54 发布

W_Jp

最新推荐文章于 2024-04-12 16:19:54 发布

阅读量780

点赞数

分类专栏： JavaWeb实战开发文章标签： javaweb 王吉平 javascript

本文链接：https://blog.csdn.net/imwangjiping/article/details/40073543

版权

JavaWeb实战开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

所有事件都是on开头的。

<html>
	<head>
		<title></title>
		<script language="javascript">
			function hello(){
				alert("欢迎光临！！！") ;
			}
			function byebye(){
				alert("您要走了？下次别来了！") ;
			}
		</script>
	</head>
	<body onLoad="hello()" onUnload="byebye()">
	</body>
</html>

单击事件

<html>
	<head>
		<title></title>
		<script language="javascript">
			function fun(){
				alert("Hello！！！") ;
			}
			
		</script>
	</head>
	<body>
		<h3><a href="#" οnclick="fun()">按我吧</a></h3>
	</body>
</html>

获取表单内容

<html>
	<head>
		<title></title>
		<script language="javascript">
			function fun(){
				var value = document.myform.name.value ;
				alert("您输入的内容是：" + value) ;
			}
			
		</script>
	</head>
	<body>
		<form antion="" method="post" name="myform">
			请输入内容：<input type="text" name="name" >
			<input type="button" value="显示" οnclick="fun()" >
		</form>
	</body>
</html>

onsubmit事件

<html>
	<head>
		<title></title>
		<script language="javascript">
			function fun(f){
				var value = f.email.value ;
				if(!/^\w+@\w+.\w+$/.test(value)){
					alert("email输入格式不正确") ;
					f.email.focus() ;	// 让email获取焦点
					f.email.select() ;	// 让已有的内容全选
					return false ;
				}
				alert("您输入的内容是：" + value) ;
				return
			}
			
		</script>
	</head>
	<body>
		<form action="2.html" method="post" name="myform" οnsubmit="return fun(this)">
			e-mail：<input type="text" name="email" >
			<input type="submit" value="提交">
		</form>
	</body>
</html>

取得HTML页面内容Demo

<html>
	<head>
		<title></title>
		<script language="javascript">
			function fun(){
				var name = document.myform.name.value ;
				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="2.html" method="post" name="myform" >
			姓名：<input type="text" name="name" ><br>
			性别：<input type="radio" name="sex" value="男" 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>编程
				  <input type="checkbox" name="inst" value="上网" >上网<br>
			<input type="button" value="显示" οnclick="fun()">
		</form>
	</body>
</html>

<html>
	<head>
		<title></title>
		<script language="javascript">
			function fun(val){
				document.myform.result.value = val ;
			}
			
		</script>
	</head>
	<body>
		<form action="" method="post" name="myform" >
			部门：<select name="dept" οnchange="fun(this.value)">
					<option value="技术部">技术部</option>
					<option value="销售部">销售部</option>
					<option value="财务部">财务部</option>
				</select><br>
			结果：<input type="text" name="result" value="">
		</form>
	</body>
</html>