5、js事件

最新推荐文章于 2024-10-10 09:56:47 发布

日拱一卒无有尽，功不唐捐终入海

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量591

点赞数

分类专栏： JavaScript 文章标签： javascript node.js html5

本文链接：https://blog.csdn.net/m0_49128301/article/details/120752294

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

5.1JS事件是什么？有什么作用？

通常鼠标或热键的动作我们称之为事件（Event）

点击、表单提交、值发生改变、鼠标移出

通过js事件，我们可以完成页面的指定特效。

5.2、JS事件驱动机制简述

页面上的特效，我们可以理解在JS事件驱动机制下进行。

JS事件驱动机制：

事件源小偷
事件偷东西
监听器警察
注册/绑定监听器让警察时刻盯着小偷

事件源：专门产生事件的组件

事件：由事件源所产生的动作或者事情

监听器：专门处理事件源所产生的事件。

5.3、常见JS事件

5.3.1、点击事件（onclick）

由鼠标或热键点击元素组件时触发（应用：点击切换图片。。。。）

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1(){
				alert("弹出");
			}
		</script>
	</head>
	<body>
		<input type="text" onclick="run1()" >
	</body>
</html>

效果：

5.3.2、焦点事件（onbluer 、 onfocus）

5.3.2.1、获取焦点事件（onfocus）

焦点：即整个页面的注意力。

默认一个正常页面最多仅有一个焦点

例如：文本框中闪烁的小竖线

通常焦点也能反映出用户目前的关注点，或者正在操作的组件

获取焦点事件：当元素组件获取焦点时触发

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		function run1(){
			alert("请输入密码");
		}
		</script>
	</head>
	<body>
		<!-- 
		获取焦点时（就是点击文本框的时候）我们可以给他添加一些提醒
		 -->
		<input type="text" onfocus="run1()"  >
	</body>
</html>

效果

5.3.2.1、失去焦点事件（onblur）

失去焦点事件：元素组件失去焦点时触发

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		function run1(){
			alert("失去焦点（检查密码的是否正确）");
		}
		</script>
	</head>
	<body>
		<!-- 
		失去焦点时（就是点击文本框以外区域时）我们可以给他添加一些提醒
		 -->
		<input type="text" onblur="run1()"  >
	</body>
</html>

效果：点击文本框以外的区域就会触发事件

5.3.3、域内容改变事件（onchange）

域内容改变事件：元素组件的值发生改变时触发

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		function run1(){
			alert("确定选这个城市吗？")
		}
		</script>
	</head>
	<body>
		<!-- 
		 当选择框  的值发生改变时，弹出一个对话框-->
		<select name="city" id="s1" onchange="run1()">
			<option value="Beijing">北京</option>
			<option value="shanghai">上海</option>
			<option value="guangzhou">广州</option>
		</select>
	</body>
</html>

效果：

用于多个选项或者多个值来回切换时做提醒

5.3.4、加载完毕事件onload

加载完毕事件：元素组件加载完毕时触发

获取元素对象，保证元素对象先加载，建议是把获取元素对象代码放在最后

（通俗讲：就是在某一个标签执行完了之后去运行某个函数）

以前我们强调必须把<script>标签放在最后，但是现在有了加载完毕事件后，就不用了

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		function run1(){
			alert("该标签已加载完毕，该运行我了");
		}
		</script>
	</head>
	<body onload="run1()" >
		<!-- 
		在body标签加载完毕之后，弹出一个对话框
		 -->
	    我一定要把这件事情做好。
	</body>
</html>

效果：

5.3.5、表单提交表事件（onsubmit）

表单提交事件：表单的提交按钮被点击时触发

注意;该事件需要返回Boolean类型的值来执行提交/执行表单数据的操作

事件得到true，提交表达数据
事件得到false，阻止表单数据提交

我们可以用正则对象来校验标签的name属性，如果符合正则返回true（提交），如果返回false（不能提交）

示例：

true

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1(){
				alert("核实用户信息无误后才可成功提交");
				return true;	
			}
		</script>
	</head>
	<body>
		<!-- 
		 表单提交按钮被点击------执行run1
		 onsunbmit 用于表单的校验
		 该事件也能够控制表单的提交
		 true  允许表单提交
		 false  阻止表单提交
		 -->
		<form onsubmit="return run1()">
			<input type="text" name="uname" /><br>
			<input type="submit" value="提交" />
		</form>
		
	</body>
</html>

false：

5.3.6、键位弹起事件（onkeyup）

键位弹起事件：在组建中输入某些内容时，键盘键位弹起时触发

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1(){
				alert("只要按下键松开手的那一刻就会弹出对话框，如果一直按着，就不会弹出");
			}
		</script>
	</head>
	<body>
		<!-- 
		用途，再输入信息时只要键位一弹起，我就可以校验信息 
		 -->
		<input type="text" onkeyup="run1()" >
	</body>
</html>

效果：

5.3.7、常用鼠标事件

鼠标事件可以做特效，比如移入移除图片时

5.3.7.1、鼠标移入事件（onmouseover）

鼠标移入事件：鼠标移入某个元素组件时触发

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1(){
				alert("鼠标移入了");
			}
		</script>
	</head>
	<body>
		<!-- 
		当鼠标移入文本框立马回触发函数 
		 -->
		<input type="text"     onmouseover="run1()" >
		
	</body>
</html>

效果：

5.3.7.2、鼠标移出事件(onmouseout)

鼠标移出事件：鼠标移出某个元素组件时触发

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1(){
				alert("鼠标移出了");
			}
		</script>
	</head>
	<body>
		<!-- 
		当鼠标移出某一区域立马回触发函数 
		 -->
		<input type="text"     onmouseout="run1()" >
		
	</body>
</html>

效果：

5.4、JS事件的两种绑定方式

5.4.1、元素事件的句柄绑定

将事件以元素的方式写到标签内部，进而绑定对应函数。

示例1：【为事件绑定一个无参函数】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		function run1(){
			alert("run1");
		}
		
		</script>
	</head>
	<body>
		<input type="text"  value="123" onclick="run1()">
	</body>
</html>

示例2：【为事件绑定一个有参函数】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		function run1(str){
			alert(str);
		}
		function run2(obj){
			alert(obj.value);
		}
		function run3(){
			alert("run3");
		}
		</script>
	</head>
	<body>
		<!-- 有参函数，在函数书写的时候就需要给函数run方法赋值 
		然后底下在调用函数的时候，函数才可以去随意赋值
		如果方法没有赋值，调用函数后就没有值。
		
		
		-->
		<input type="text"  value="123" onclick="run1('你好')">
		<!-- this指代当前的标签，因为前面的obj对象已经获取了value值，所以最后返回当前标签属性的值 -->
		<input type="text"  value="456" onclick="run2(this)"><br>
		<!-- 同时绑定多个函数，执行顺序从左到右依次执行 -->
		<input type="text"  value="789" onclick="run1('在输出字符类型时；外双里单'),run2(this),run3()">
		
	</body>
</html>

外双里单

事件句柄绑定方式

优点：

①开发便捷
②传参方便
③可以绑定多个参数

缺点：JS和HTML代码高度糅合在一起，不利于多部份协同开发

5.4.2、DOM绑定方式

使用DOM的属性方式绑定事件

示例1：【将下述绑定转为DOM 方式绑定】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		function run1(str){
			alert(str);
		}
		// function run2(str){
		// 	alert(str);
		// }
		// function run3(str){
		// 	alert(str);
		// }
		// 加载完毕,触发onload事件,此处用的DOM绑定方式(匿名函数)
		window.onload=function(){
			// 用DOM对象获取文本框id
			
			var a=document.getElementById("s1")
			// 用点击事件句柄绑定多个函数,这里可以用一个函数就可以了,因为每次调用格式一样
			a.onclick=run1("今天理解的不错");
			a.onclick=run1("记住两个问题晚上要处理");
			a.onclick=run1("加油,你一定可以的!");
		}
		
		
		
		
		</script>
	</head>
	<body>
		<!-- 需求:在也页面加载完毕时,一次返回,今天理解的不错,记住两个问题晚上要处理,加油,你一定可以的!
		步骤一:建立文本框,给文本框一个id属性,以方便最后用DOM对象获取ID值
		步骤二:建立三个函数,三个都为含参函数,参数值类型为字符串
		步骤三:用DOM方式绑定多个函数,并且内嵌点击事件
		步骤四:在匿名函数中用DOM对象获取文本框的id,然后在用点击事件调用三个函数
		 -->
		<input type="text" id="s1" name="张三">
		
	</body>
</html>