JavaScript (六) -- JavaScript 事件（常用事件的运用）

普雅^0^雷蒙达

已于 2023-05-08 22:36:39 修改

阅读量1.1k

点赞数 1

分类专栏： # JavaScript 文章标签： javascript 前端开发语言

于 2023-05-06 21:56:44 首次发布

本文链接：https://blog.csdn.net/PUYALEI/article/details/130535626

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

具体方法：

1. onclick事件的使用(鼠标单击事件)

onclick事件的代码演示：

2. ondblclick事件的使用(鼠标双击事件)

ondblclick事件的代码演示：

3. onload事件的使用（页面加载事件）

onload事件的代码演示：

4. onsubmit事件的使用（表单提交事件）

onsubmit事件的代码演示：

5. onfocus事件的使用（焦点获取事件）

onfocus事件的代码演示：

6. onblur事件的使用（焦点丢失事件）

onblur事件的代码演示：

7. onchange事件的使用（域内容的改变事件）

onchange事件的代码演示：

小拓展：

具体方法：

1. onclick事件的使用(鼠标单击事件)

JavaScript onclick事件是在用户单击元素时触发的事件。

以下是一些常见的JavaScript onclick事件的使用案例：

按钮点击：在按钮上使用onclick事件，可以在用户单击按钮时执行特定的JavaScript代码。您可以使用onclick事件来触发登录、提交表单或显示弹出窗口等操作。
超链接点击：使用onclick事件，您可以在用户单击超链接时执行特定的JavaScript代码，而不是默认操作。例如，在单击超链接时显示一个警告框或调用Google Analytics等跟踪脚本。图片点击：在网站上使用onclick事件，可以让用户单击图片时执行特定的JavaScript代码。例如，您可以创建一个图像库，当用户单击图像时，在另一个网页上显示大图像。
卡片翻转：使用onclick事件可以实现卡片翻转效果。例如，在单击卡片时，卡片可以翻转并显示隐藏的内容，然后在再次单击时翻回正面。

总之，JavaScript onclick事件使您能够根据需要在用户单击元素时执行特定的JavaScript代码，从而增强您的网站的交互性和功能性。

onclick事件的代码演示：

用于在单击按钮时更改文本颜色：

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript onclick事件演示</title>
	<script>
		function changeColor() {
			document.getElementById('text').style.color = 'red';
		}
	</script>
</head>
<body>
	<h1 id="text">欢迎来到我的网站</h1>
	<button onclick="changeColor()">单击此处更改文本颜色</button>
</body>
</html>

在上面的例子中，我们在HTML按钮元素上添加了一个onclick属性，并将其设置为changeColor()函数。在单击按钮时，onclick事件将触发函数并调用它来更改文本颜色。

2. ondblclick事件的使用(鼠标双击事件)

JavaScript ondblclick事件在HTML元素上双击时触发。

以下是一些常见的JavaScript ondblclick事件使用案例：

图片放大/缩小：使用ondblclick事件来实现图片的放大和缩小。在图片元素上设置ondblclick事件，双击时更改其大小。
显示详细信息：使用ondblclick事件来显示更多详细信息。当用户双击某个元素时，可以使用JavaScript来动态显示其他相关信息。
切换样式：使用ondblclick事件来切换元素的样式。例如，当用户双击文本时，可以将其字体颜色更改为另一种颜色。
触发动画效果：使用ondblclick事件来触发动画效果。例如，当用户双击某个元素时，可以使用JavaScript来显示/隐藏其他元素，创建动态效果。

总之，JavaScript ondblclick事件使您能够创建交互式、动态的Web页面，提供更好的用户体验和增强的功能。

ondblclick事件的代码演示：

用于在双击图片时放大和缩小图片：

html
<!DOCTYPE html>
<html>
<head>
	<title>JavaScript ondblclick事件演示</title>
	<script>
		function zoomImage() {
			var img = document.getElementById('myImage');
			if (img.style.width == '300px') {
				img.style.width = '400px';
			} else {
				img.style.width = '300px';
			}
		}
	</script>
	<style>
		img {
			width: 300px;
		}
	</style>
</head>
<body>
	<img id="myImage" src="https://myphoto.com/001.jpe" ondblclick="zoomImage()">
</body>
</html>

在上述代码中，我们使用了一个名为zoomImage()的JavaScript函数和ondblclick事件来放大和缩小图片。当用户双击图片时，将调用此函数进行相应的更改。如果图片的当前宽度为300像素，则将其宽度更改为400像素。否则，将其宽度更改为300像素。这个例子中，我们在HTML的img元素上添加了一个ondblclick属性，并将其设置为zoomImage()函数。当用户双击图片时，ondblclick事件将触发此函数，以更改图片大小。

3. onload事件的使用（页面加载事件）

JavaScript onload 事件可以用来确保页面的所有资源，如图片、样式表、脚本等已经加载完成，以及文档树已经构建完成后执行定义的函数。

以下是一些 onload 事件的使用案例：

图片加载：使用 onload 事件来确保页面上的所有图片都已经加载完成。例如，可以定义一个函数来处理所有图片上的 onload 事件，以确保所有图片都已经加载完成后执行某个操作。
JavaScript 动态加载：当使用 JavaScript 动态地向页面添加某些功能时，可以使用 onload 事件来确保所有资源都已经加载完成。例如，可以使用 JavaScript 动态加载某个库文件，并在 onload 事件触发时执行某些代码。
AJAX 请求：使用 onload 事件确保 AJAX 请求已经完成并返回数据后执行一些处理操作，例如更新页面内容或显示错误信息。
三方插件加载：当使用一些第三方插件时，例如视频、地图或社交媒体插件，可以使用 onload 事件来确保所有插件都已经加载完成并且可以使用。

总之，使用 onload 事件可以确保页面的所有资源都已经加载完成，从而使页面具有更好的用户体验和交互效果。

onload事件的代码演示：

1. 用于在页面加载完毕后弹出一个提示框：

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript onload事件演示</title>
	<script>
		window.onload = function() {
			alert('页面加载完成！');
		}
	</script>
</head>
<body>
	<h1>欢迎来到我的网站</h1>
	<p>这是一个演示页面</p>
</body>
</html>

在上述代码中，我们使用了 window.onload 事件来确保页面加载完成后执行我们定义的函数。当页面加载完成后，会弹出一个提示框，显示“页面加载完成！”的消息。

2. 使用 body 标签的 onload 事件来实现页面加载完毕后弹出一个提示框：

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript onload事件演示</title>
	<script>
		function pageLoaded() {
			alert('页面加载完成！');
		}
	</script>
</head>
<body onload="pageLoaded()">
	<h1>欢迎来到我的网站</h1>
	<p>这是一个演示页面</p>
</body>
</html>

在这种情况下，我们在 <body> 标签上设置了 onload 属性，指向我们定义的 pageLoaded 函数。当 <body> 标签加载完成后，会执行该函数，弹出一个提示框。

4. onsubmit事件的使用（表单提交事件）

JavaScript onsubmit事件是在HTML表单提交时触发的事件。

以下是一些常见的JavaScript onsubmit事件使用案例：

表单验证：使用onsubmit事件来验证表单字段是否已填写，是否符合规定的格式或是否包含无效数据。如果表单未通过验证，则可以取消提交并显示错误消息。
数据处理：使用onsubmit事件来处理表单数据。在提交表单之前，您可以处理数据并将其发送到服务器。这使您能够编写自己的表单处理脚本，而不是使用HTML中默认的处理器。
Google Analytics：使用onsubmit事件来跟踪表单提交事件。例如，您可以使用Google Analytics来跟踪表单提交的次数、位置和其他有关用户提交行为的数据。
AJAX请求：使用onsubmit事件来使用AJAX提交表单数据，这样可以避免页面刷新，并提供更快速的响应时间。这在需要实时更新的网页中尤为有用。

总之，JavaScript onsubmit事件使您能够在表单提交之前进行数据验证和处理，并提供更好的用户体验和增强的功能。

onsubmit事件的代码演示：

用于在表单提交之前验证输入的电子邮件地址：

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript onsubmit事件演示</title>
	<script>
		function validateEmail() {
			var email = document.getElementById('email').value;
			var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
			if (!pattern.test(email)) {
				alert('请输入有效的电子邮件地址！');
				return false;
			}
			return true;
		}
	</script>
</head>
<body>
	<form onsubmit="return validateEmail()">
		<label for="email">电子邮件地址：</label>
		<input type="text" id="email" name="email"><br><br>
		<input type="submit" value="提交">
	</form>
</body>
</html>

在上述代码中，我们使用了一个名为validateEmail()的JavaScript函数和onsubmit事件来验证表单中输入的电子邮件地址。在用户单击提交按钮之前，将调用此函数进行验证。如果表单中输入的电子邮件地址不符合正则表达式模式，“验证”函数将返回false，表单提交将被取消并显示警告消息。否则，将提交表单并将其发送到服务器。

在这个例子中，我们在HTML表单元素上添加了一个onsubmit属性，并将其设置为validateEmail()函数。在表单提交之前，onsubmit事件将调用此函数进行验证，以确保电子邮件地址符合规定的模式。这个代码演示了如何使用JavaScript onsubmit事件来在表单提交之前验证表单输入并取消提交，如果表单输入无效，则会显示警告消息。

5. onfocus事件的使用（焦点获取事件）

JavaScript onfocus事件在元素获得焦点时触发。

以下是一些常见的JavaScript onfocus事件使用案例：

表单验证：使用onfocus事件来验证表单元素中输入的信息是否符合要求。当用户聚焦于表单元素时，可以使用JavaScript来检查其输入是否符合预期格式。
自动完成：使用onfocus事件来实现自动完成功能。当用户聚焦于输入框中时，可以使用JavaScript来动态显示相关建议。
更改元素样式：使用onfocus事件来更改元素的样式。例如，当用户聚焦于文本框中时，可以更改其字体颜色或背景颜色。
显示隐藏元素：使用onfocus事件来显示其他元素。例如，当用户聚焦于某个按钮上时，可以使用JavaScript来显示一个下拉菜单。

总之，JavaScript onfocus事件使您能够创建交互式、动态的Web页面，提供更好的用户体验和增强的功能。

onfocus事件的代码演示：

用于验证表单元素输入：

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript onfocus事件演示</title>
	<script>
		function validateInput() {
			var input = document.getElementById('myInput');
			var value = input.value;
			if (value.length < 3) {
				input.style.border = '2px solid red';
			} else {
				input.style.border = '1px solid black';
			}
		}
	</script>
	<style>
		input {
			padding: 10px;
			font-size: 16px;
			border-radius: 5px;
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h2>请输入至少3个字符的内容：</h2>
	<input id="myInput" type="text" onfocus="validateInput()">
</body>
</html>

在上述代码中，我们使用了一个名为validateInput()的JavaScript函数和onfocus事件来验证表单元素的输入。当用户聚焦于输入框中时，将调用此函数进行相应的检查。如果输入少于3个字符，则将文本框的边框样式更改为红色。否则，保持文本框的边框样式为黑色。这个例子中，我们在HTML的input元素上添加了一个onfocus属性，并将其设置为validateInput()函数。当用户聚焦于输入框时，onfocus事件将触发此函数，以检查其输入是否符合预期格式。

6. onblur事件的使用（焦点丢失事件）

JavaScript onblur事件在元素失去焦点时触发。

以下是一些常见的JavaScript onblur事件使用案例：

表单验证：使用onblur事件来验证表单元素中输入的信息是否符合要求。当用户离开表单元素时，可以使用JavaScript来检查其输入是否符合预期格式。
自动完成：使用onblur事件来实现自动完成功能。当用户离开输入框时，可以使用JavaScript来动态显示相关建议。
更改元素样式：使用onblur事件来更改元素的样式。例如，当用户离开文本框时，可以更改其字体颜色或背景颜色。
显示隐藏元素：使用onblur事件来隐藏其他元素。例如，当用户离开某个按钮上时，可以使用JavaScript来隐藏一个下拉菜单。

总之，JavaScript onblur事件使您能够创建交互式、动态的Web页面，提供更好的用户体验和增强的功能。

onblur事件的代码演示：

用于验证表单元素输入：

html
<!DOCTYPE html>
<head>
	<title>JavaScript onblur事件演示</title>
	<script>
		function validateInput() {
			var input = document.getElementById('myInput');
			var value = input.value;
			if (value.length < 3) {
				input.style.border = '2px solid red';
			} else {
				input.style.border = '1px solid black';
			}
		}
	</script>
	<style>
		input {
			padding: 10px;
			font-size: 16px;
			border-radius: 5px;
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h2>请输入至少3个字符的内容：</h2>
	<input id="myInput" type="text" onblur="validateInput()">
</body>
</html>

在上述代码中，我们使用了一个名为validateInput()的JavaScript函数和onblur事件来验证表单元素的输入。当用户离开输入框时，将调用此函数进行相应的检查。如果输入少于3个字符，则将文本框的边框样式更改为红色。否则，保持文本框的边框样式为黑色。这个例子中，我们在HTML的input元素上添加了一个onblur属性，并将其设置为validateInput()函数。当用户离开输入框时，onblur事件将触发此函数，以检查其输入是否符合预期格式。

7. onchange事件的使用（域内容的改变事件）

JavaScript onchange事件在元素值更改后触发。

以下是一些常见的JavaScript onchange事件使用案例：

表单验证：使用onchange事件来验证表单元素中输入的信息是否符合要求。当用户离开表单元素或更改输入时，可以使用JavaScript来检查其输入是否符合预期格式。
自动完成：使用onchange事件来实现自动完成功能。当用户更改输入框中的值时，可以使用JavaScript来动态显示相关建议。
即时更新：使用onchange事件来修改其他元素的值。例如，当用户更改下拉菜单的选项时，可以使用JavaScript来更改其他区域的信息。
文件上传：使用onchange事件来获取用户上传的文件。例如，当用户选择要上传的文件时，可以使用JavaScript来检索文件信息并执行相应的操作。

onchange事件的代码演示：

用于更改元素值后即时更新其他信息：

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript onchange事件演示</title>
	<script>
		function updateInfo() {
			var select = document.getElementById('mySelect');
			var selectedValue = select.value;
			var info = document.getElementById('info');
			info.innerHTML = '您选择了 ' + selectedValue;
		}
	</script>
</head>
<body>
	<h2>请选择您喜欢的水果：</h2>
	<select id="mySelect" onchange="updateInfo()">
		<option value="apple">苹果</option>
		<option value="banana">香蕉</option>
		<option value="orange">橙子</option>
	</select>
	<div id="info"></div>
</body>
</html>

在上述代码中，我们使用了一个名为updateInfo()的JavaScript函数和onchange事件来即时更新其他元素的值。当用户更改下拉菜单的选项时，将调用此函数来更新其他区域的信息。在这种情况下，我们将选定的值添加到带有“ info”ID的元素中。我们在HTML的select元素上添加了一个onchange属性，并将其设置为updateInfo()函数。当用户更改下拉列表中的选项时，onchange事件将触发此函数，以更新其他区域的信息。

小拓展：

需要了解的事件：

想要学习需要了解的事件的具体运用，请跳转到：

JavaScript (七) -- JavaScript 事件（需要了解的事件的运用）

附录：

（一）通过点击图片，开关小灯泡

小灯泡开关

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img id="img1" src="../img/off.gif" />
	</body>
	<script>
		//点击图片, 图片在off.gif与on.gif之间来回切换, 展示出小灯泡开关状态
		//原理: 给图片绑定单击事件, 触发函数,切换图片(改变src的属性)
		
		//1.获取图片对象
		var img = document.getElementById("img1");
		
		//2.给图片绑定单击事件
		img.onclick = fun;
		
		//定义变量记录小灯泡状态,以便于判断当前应该切换那张图片, 当flag=false时,切换on.gif  当flag=true时,切换off.gif  
		var flag = false;
		
		//3.定义函数, 实现来回切换图片的功能
		function fun(){
			//判断当前灯泡状态
			if(flag){
				//true =>切换off.gif, 同时修改flag为false
				img.src = "../img/off.gif";
				flag = false;
			}else{
				//flase =>切换on.gif, 同时修改flag为true
				img.src = "../img/on.gif";
				flag = true;
			}
		}
	</script>
</html>

off.gif的原图片：