JavaWeb - JS事件 -详细解说-优快云博客

本文链接：https://blog.youkuaiyun.com/chuli0327/article/details/109280874

本文详细介绍了JavaScript事件，包括事件驱动机制、七种常见事件（点击、焦点、内容改变、加载完毕、表单提交、键位弹起、鼠标事件）以及两种事件绑定方式（元素句柄和DOM绑定）。焦点事件的onfocus和onblur，表单提交的onsubmit事件，以及键位弹起的onkeyup事件等关键概念被详细阐述。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS事件

1.简述

是什么：通常鼠标或热键的动作我们称之为事件(Event)，eg：点击，表单提交，值发生变化，鼠标移入，鼠标移出

作用：通过JS事件，我们可以完成页面的指定特效

2.JS事件驱动机制

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

JS事件驱动机制

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件驱动机制</title>
		<script>
			function run(){
				alert("ziqi");
			}
		</script>
	</head>
	<body>
		<!-- 
			事件源 ：按钮
			事件 ： 点击事件 onclick
			监听器 ：run（）方法
			注册监听器：onclick = "run()"
		-->
		<input type="button" value="one" onclick="run()" />
	</body>
</html>

3.七种常见的JS事件

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>

2.焦点事件

焦点：即整个页面的注意力，默认一个正常页面最多仅有一个焦点，通常焦点也能反映用户目前的关注点，或正在操作的组件

a. 获取焦点事件 ( onfocus ) ：当元素组件获取焦点时触发

b.失去焦点事件 ( onblur ) ：元素组件失去焦点时触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function run1(){
				alert("获取焦点了");
			}
		</script>
	</head>
	<body>
		<!--
			文本框 获取焦点时  失去焦点时  将onfocus 改为 onblur 弹出一个对话框
		-->
		<input type="text" onfocus="run1()"/>
	</body>
</html>

3.域内容改变事件 ( onchange ) ：元素组件的值发生改变时触发元素组件的值发生改变时触发

<body>
		<!-- 
			当选择框 值发生改变时，弹出一个对话框
			
		-->
		<select onchange="run1()">
			<option value="bj">北京</option>
			<option value="sh">上海</option>
			<option value="gz">广州</option>
		</select>
	</body>

4.加载完毕事件 ( onload ) ：元素组件加载完毕时触发

意义：获取元素对象，保证元素对象先加载，建议是把获取元素对象代码放在最后，有了加载完毕事件就可以放任意位置，只要在元素上面添加加载完毕事件，先加载完毕再执行即可

	<!--
		在body标签加载完毕后， 弹出一个对话框，对话框必须等标签加载完后才能加载
	-->
	<body onload="run1()">
		先加载内容
	</body>

5.表单提交事件 ( onsubmit ) ：表单提交按钮被点击时触发

注意：该事件需要返回Boolean类型的值来执行，提交/阻止表单数据的操作 -事件的到true 提交表单数据 -事件得到false 阻止表单数据提交

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

6.键位弹起事件 ( onkeyup ) ：键位弹起事件:在组件中输入某些内容时，键盘键位弹起时触发该事件

可以用于输入校验

<body>
		<input type="text" onkeyup="run1()"/>
	</body>

7. 常用鼠标事件

a.鼠标移入事件 ( onmouseover ) ：鼠标移入事件:鼠标移入某个元素组件时触发

b.鼠标移出事件 (onmouseout) ：鼠标移出事件:鼠标移出某个元素组件时触发

	<body>
		<!--
			鼠标移入文本框，  弹出一个对话框
		-->
		<input type="text"  onmouseover="run1()"/>
	</body>

4.. 两种JS事件绑定方式

1.元素句柄绑定方式

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

优点： 1，开发便捷； 2，传参方便； 3.可以绑定多个函数；

缺点： JS与HTML代码高度糅合在一起，不利于多部门的项目开发维护

绑定一个函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function run1(){
				alert("run1");
			}
			
			function run2(str){
				alert(str);
			}
			
			function run3(obj){
				alert(obj.value);
			}
		</script>
	</head>
	<body>
		<!-- 绑定一个无参函数 -->
		<input type="text" value="1111" onclick="run1()"/><br />
		
		<!-- 绑定一个有参函数  ，参数就是一个字符串 -->
		<input type="text" value="2222" onclick="run2('你好啊')"/><br />
		
		<!-- 绑定一个有参函数  ，参数就是一个元素对象 -->
		<input type="text" value="3333" onclick="run3(this)"/><br />
	</body>
</html>

绑定多个函数

	<body>
		<!-- 绑定多个函数 ， 函数的排序就是执行顺序 -->
		<input type="text" value="1111" onclick="run1(),run2(),run3()"/><br />
	</body>

2.DOM绑定方式 ( 推荐使用 )

使用DOM属性方式绑定事件

优点：使得HTML代码和JS代码完全分离

缺点：1，不能传递参数解决：匿名函数解决

2.一个JS事件只能绑定一个函数，匿名函数校验绑定多个函数

第一种，普通绑定方式

DOM绑定方式对象.事件属性一次只能绑定一个函数，不能传递参数 window.οnlοad=run1;
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function run1(){
				alert("run1");
			}
			window.onload=run1；
		</script>
	</head>
	<body>
		
		<input type="text" id="t1"/>
	</body>
</html>

第二种，匿名函数绑定方式

DOM绑定方式匿名函数可以绑定多个函数，可以传递参数
window.οnlοad=function(){
run1();
};

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function run1(){
				alert("run1");
			}
			function run2(){
				alert("run2");
			}
			
			//当页面加载完毕时，  元素对象已经加载到内存中
			window.onload=function(){
				//使用DOM方式获取到元素对象
				var t1=document.getElementById("t1");
				t1.onclick=function(){
					run1();
					run2();
				};
			};
			
		</script>
	</head>
	<body>
		<!--
			为文本框  onclick事件绑定上两个函数，run1和run2
		-->
		<input type="text" id="t1"/>
	</body>
</html>