JavaScript_4th_事件处理

最新推荐文章于 2022-07-24 14:54:03 发布

weqpo

最新推荐文章于 2022-07-24 14:54:03 发布

阅读量218

点赞数

分类专栏： JavaScript 文章标签： JavaScript 事件 onclick onsubmit

本文链接：https://blog.csdn.net/weqpo/article/details/63688173

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、JavaScript事件处理
当网页上发生某些事情时，可以调用函数或语句做出相应的处理。
1）onfocus：在用户为了输入而选择select、text、textarea等时。
2）onbulr：在select、text、password、textarea失去焦点时。
3）onchange：在select、text、textarea的值被改变且失去焦点时。
4）onclick：在一个对象被鼠标点中时。
5）onload：出现一个文档在浏览器窗口中完成加载的时候，一般写在body标签中。
6）onunload：当前文档被替换时，如刷新本页面，就会触发该事件。
7）onmouseover：鼠标被移动到一个对象上时。
8）onmouseout：鼠标从一个对象上移开时。
9）onselect：当form对象中的内容被选中时。
10）onsubmit：出现在用户通过提交按钮提交一个表单时。

二、介绍
1）onFocus事件
在用户为了输入而选择select、text、textarea等时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form name="test">
			<input type="text" name="userName" value="SXT" οnfοcus="JavaScript:alert(document.test.userName.value)" />
		</form>
	</body>
</html>

总结：其中"JavaScript:"表示后面是JavaScript语句，"JavaScript:"可以省略。

2）onClick事件
单击事件，在一个对象被鼠标点中时。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="../img/btn_reg.gif" οnclick="alert('ok')" />
	</body>
</html>

总结：
①当点击图片时，会弹出ok字样的弹窗。
②alert('ok')为什么用了单引号，因为外面是双引号。

3）onload事件和onunload事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body οnlοad="alert('hello');" οnunlοad="alert('bye-bye!');" >
		
	</body>
</html>

总结：当打开本页面时，当前文档加载完成，触发onload事件，弹出hello，刷新本页面时候，由于本页面被替代，触发onunload事件，弹出bye-bye!。

4）onmouseover事件和onmouseout事件
onmouseover：鼠标被移动到一个对象上时。onmouseout：鼠标从一个对象上移开时。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img.jpg" οnmοuseοver="alert('over')" οnmοuseοut="alert('out')" />
	</body>
</html>

总结：当鼠标移动到图片上时，弹出'over'，当鼠标移出图片时，弹出'out'。

5）onselect事件
当form对象中的内容被选中时。
如ctrl+A选中文本框中的内容时,该事件发生，用户可以实现一个弹窗效果。

6）onSubmit事件
①表单中input标签的type="submit" 表示这是一个提交按钮。
②onsubmit事件出现在用户通过提交按钮提交一个表单时，当用户点击提交按钮，会触发onsubmit事件，进行相应动作，如：弹窗，当点击确定后，才会将当前页面的表单中的数据提交到action指定的文件中。
③注意：onsubmit要写在form标签中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		</script>
	</head>
	<body>
		<form  name="test" action="../base/001_helloworld.html" οnsubmit="alert('ok');" >
			<input type="submit" value="ok" />
		</form>
	</body>
</html>

总结：
①点击ok提交按钮后会弹出ok弹窗，然后执行001_helloworld.html中的内容。
②当onsubmit为οnsubmit="return false;"时，表示程序不再往下执行，即无法提交。
③当onsubmit为οnsubmit="return true;"时，会直接执行001_helloworld.html中的内容。
④我们可以根据返回值来控制是否要进行提交。

下面是一个简单的表单验证。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function check() {
				if(document.myForm.myText.value == "") {
					alert("内容不能为空!");
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<form name="myForm" action="../base/001_helloworld.html" οnsubmit="return check();" >
			<input type="text" name="myText" />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>