JavaScript学习（2）—— 事件

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

Yacht13

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

阅读量91

点赞数

分类专栏： HTML、CSS、JavaScript、jQuery 文章标签： javascript

本文链接：https://blog.csdn.net/Archer__13/article/details/124825891

版权

HTML、CSS、JavaScript、jQuery 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

本文详细介绍了HTML5中常用的事件如onload、onlick、onblur等的静态和动态注册方法，以及它们在页面加载、表单提交和交互行为中的应用。从静态注册到动态绑定，一步步教你理解并实现场景中的JavaScript事件处理。

摘要由CSDN通过智能技术生成

一. 常用事件

onload（加载完成事件）	页面加载完之后，常用于JS代码初始化操作
onlick（单击事件）	常用于按钮的点击响应操作
onblur（失去焦点事件）	常用于输入框失去焦点后验证其输入内容是否合法
onchange（内容发生改变事件）	常用于下拉列表和输入框内容发生改变后操作
onsubmit（表单提交事件）	常用于表单提交前，验证所有表单项是否合法

二. 事件注册

事件注册：告诉浏览器当事件响应后要执行哪些操作代码

1. 静态注册：通过html标签的事件属性直接赋予事件响应后的代码。

2. 动态注册：先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){} 来赋予事件响应后的代码。

动态注册的基本步骤：①获取标签对象；②标签对象.事件名=function(){}

三. onload事件

浏览器解析完HTML页面之后就会自动触发的事件

①静态注册

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		function onloadFunction(){
			alert("触发onload事件");
		}
  </script>
</head>
<body onload="onloadFunction()">
	
</body>
</html>

②动态注册

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		window.onload = function(){
			alert("触发onload事件");
		}
  </script>
</head>
<body>
	
</body>
</html>

四. onlick事件

点击按钮之后触发的事件

① 静态注册

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		function onlclickFunc(){
			alert("触发onlclick事件");
		}
  </script>
</head>
<body>
	<button onclick="onlclickFunc()">按钮</button>
</body>
</html>

②动态注册

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		window.onload = function(){
			//1.获取标签对象
			var btObject = document.getElementById("bt");  //通过id属性获取标签对象
			//2.标签对象.事件名=function(){}
			btObject.onclick = function(){
				alert("触发onlclick事件");
			}
		}
  </script>
</head>
<body>
	<button id="bt">按钮</button>
</body>
</html>

五. onblur事件

输入框失去焦点后触发的事件（当光标不在输入框时会触发该事件）

①静态注册

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		function onblurFun(){
			console.log("onblur事件");   //console是控制台对象，专门用于像浏览器的控制器打印输出，用于测试使用；log是打印的方法
		}
  </script>
</head>
<body>
	用户名：<input type="text" onblur="onblurFun()"> <br/>
	密码：<input type="password" > <br/>

</body>
</html>

②动态注册

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		window.onload = function(){
			//1.获取标签对象
			var nameObject = document.getElementById("name");  //通过id属性获取标签对象
			//2.标签对象.事件名=function(){}
			nameObject.onblur = function(){
				console.log("onblur事件"); 
			}
		}
  </script>
</head>
<body>
	用户名：<input type="text" id="name"> <br/>
	密码：<input type="password" > <br/>

</body>
</html>

六. onchange事件

当发生改变时会触发onchange事件

①静态注册

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		function onchangeFun(){
			alert("onchange事件");
		}
  </script>
</head>
<body>
	国家：<select onchange="onchangeFun()">        
				<option>中国</option>	
				<option>美国</option>
				<option>英国</option>
		  </select> <br/>

</body>
</html>

②动态注册

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		window.onload = function(){
			//1.获取标签对象
			var selectObject = document.getElementById("sel");  //通过id属性获取标签对象
			//2.标签对象.事件名=function(){}
			selectObject.onchange = function(){
				alert("onchange事件");
			}
		}
  </script>
</head>
<body>
	国家：<select id="sel">        
				<option>中国</option>	
				<option>美国</option>
				<option>英国</option>
		  </select> <br/>

</body>
</html>

七. onsubmit事件

在表单提交前，验证所有表单项是否合法

①静态注册

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		function onsubmitFun(){
			//要验证所有表单项是否合法，如果有一个不合法就阻止表单提交
			alert("存在表单项不合法");  //这里可以写代码进行判断
			
			return false;
		}
  </script>
</head>
<body>
	<form action="http://localhost:8080" method="post" onsubmit="return onsubmitFun()">
		用户名：<input type="text" name="username"> <br/>
		密码：<input type="password" name="password"> <br/>
		<input type="submit" value="登录">
	</form>
</body>
</html>

②动态注册

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		window.onload = function(){
			//1.获取标签对象
			var formObject = document.getElementById("f");  //通过id属性获取标签对象
			//2.标签对象.事件名=function(){}
			formObject.onsubmit = function(){
				alert("存在表单项不合法");  //这里可以写代码进行判断
				return false;
			}
		}
  </script>
</head>
<body>
	<form action="http://localhost:8080" method="post" id="f">
		用户名：<input type="text" name="username"> <br/>
		密码：<input type="password" name="password"> <br/>
		<input type="submit" value="登录">
	</form>
</body>
</html>