网页学习——JavaScript事件_onfocus是网页事件吗-CSDN博客

本文链接：https://blog.csdn.net/m0_53156691/article/details/124118847

本文深入介绍了JavaScript事件，包括事件的捕获和冒泡阶段，鼠标移动和点击事件，页面加载与卸载，焦点变化，键盘交互，表单提交与重置，以及文本选择和改变事件。通过实例代码展示了如何实现这些事件，帮助读者理解并应用到实际项目中。

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

🌌JavaScript事件是指用户与浏览器中的Web页面进行交互时，触发了网页元素的JavaScript函数的行为，如点击。悬停、键盘输入或者页面加载等，主要是用来响应用户的操作，以创建可以交互的页面。

文章目录

JavaScript事件初识：

在JavaScript中，一个事件的完成会经历四个阶段：

触发阶段：对各个节点进行相关设置的初始阶段；
捕获阶段：该阶段事件会沿着DOM树从最高的document节点向子节点传递，直到目标节点；
处理阶段：浏览器查找到目标节点的事件监听器并且运行；
冒泡阶段：该阶段事件沿着DOM树从目标节点向父节点传递，直到最高的document节点。

下面结合代码练习加深对JavaScript事件的理解：

1、事件的捕获和冒泡🎈

通过将addEventListener()函数的最后一个参数设置为true来使其事件处理方式为捕获，此时事件从父节点传递到子节点；
在这里插入图片描述
通过将addEventListener()函数的最后一个参数设置为false来使其事件处理方式为冒泡，此时事件从子节点传递到父节点。

例1：在事件不同的节点设置监听器，通过观察他们的响应顺序来验证捕获和冒泡过程
（说明：这里用innerHTML 设置 div0 的显示文本内容，用innerHTML.replace(/被替换的内容/g,"替换为的内容");替换调 div0 中原有的内容，如果 div0 内原来无“被替换内容”，则该代码不会被执行，从而可以验证事件的执行顺序。）

①验证捕获的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件的捕获</title>
		<style type="text/css">
		body{margin: 10px;}
		#div0{
			width: 200px;
			height: 300px;
			border: 3px solid antiquewhite;
			position: absolute;
			left: 350px;
		}
		#div1{
			width: 300px;
			height: 300px;
			border: 1px solid;
			float: left;
		}
		#div2{
			width: 200px;
			height: 200px;
			border: 1px solid;
			float: left;
		}
		#div3{
			width: 100px;
			height: 100px;
			border: 1px solid;
			float: left;
		}
		</style>
	</head>
	<body>
		<div id="div1"><p>div1</p>
		  <div id="div2"><p>div2</p>
		    <div id="div3"><p>div3</p>
			</div>
		  </div>
		</div>
		<div id="div0">div0</div>
		
		<script>
		var div1=document.getElementById('div1')
		var div2=document.getElementById('div2')
		var div3=document.getElementById('div3')
		var div0=document.getElementById('div0')
		
		div1.addEventListener('click', function(){
			div0.innerHTML="点击了div1之后事件经过了div1";
		},true);
		div2.addEventListener('click',function(){
			div0.innerHTML=div0.innerHTML.replace(/点击了div1之后事件经过了div1/g,"点击了div2之后事件经过了div1、div2");
		},true)
		div3.addEventListener('click',function(){
			div0.innerHTML=div0.innerHTML.replace(/点击了div2之后事件经过了div1、div2/g,"点击了div3之后事件经过了div1、div2、div3")
		},true)
		</script>
	</body>
</html>

运行效果如下图（点击div3时会显示事件经过了div1，div2，div3；点击div2时会显示事件经过了div1，div2；点击div1时会显示事件经过了div1）：
请添加图片描述
②验证冒泡的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件的冒泡</title>
		<style type="text/css">
		body{margin: 10px;}
		#div0{
			width: 200px;
			height: 300px;
			border: 3px solid antiquewhite;
			position: absolute;
			left: 350px;
		}
		#div1{
			width: 300px;
			height: 300px;
			border: 1px solid;
			float: left;
		}
		#div2{
			width: 200px;
			height: 200px;
			border: 1px solid;
			float: left;
		}
		#div3{
			width: 100px;
			height: 100px;
			border: 1px solid;
			float: left;
		}
		</style>
	</head>
	<body>
		<div id="div1"><p>div1</p>
		  <div id="div2"><p>div2</p>
		    <div id="div3"><p>div3</p>
			</div>
		  </div>
		</div>
		<div id="div0">div0</div>
		
		<script>
		var div1=document.getElementById('div1')
		var div2=document.getElementById('div2')
		var div3=document.getElementById('div3')
		var div0=document.getElementById('div0')
		
		div1.addEventListener('click', function(){
			div0.innerHTML=div0.innerHTML.replace(/点击了div2之后事件经过了div3、div2/g,"点击了div1之后事件经过了div3、div2、div1");
		},false);
		div2.addEventListener('click',function(){
			div0.innerHTML=div0.innerHTML.replace(/点击了div3之后事件经过了div3/g,"点击了div2之后事件经过了div3、div2");
		},false);
		div3.addEventListener('click',function(){
			div0.innerHTML="点击了div3之后事件经过了div3";
		},false)
		</script>
	</body>
</html>

运行效果如下图（点击div1时事件无反映；点击div2时事件无反应；点击div3时会显示事件经过了div3，div2，div1）：请添加图片描述

2、鼠标移动与点击事件🐀

🔘1.鼠标移动事件
在HTML元素的属性中可设置的鼠标移动事件主要有3个：

onmouseover 事件：鼠标移动到对象范围的上方时触发的事件；
onmousemove 事件：当鼠标每移动一个像素时触发的事件；
onmouseout 事件：当鼠标移出指定对象时触发的事件。

例2-1：
核心代码（其余HTML与CSS代码与例1中的大致相同）：

<div id="div1" onmouseover="div1.innerHTML=div1.innerHTML+'鼠标移动到div1上！'">
<p>div1</p></div>
<div id="div2" onmousemove="div2.innerHTML=div2.innerHTML+'鼠标在div2上移动！'">
<p>div2</p></div>
<div id="div3" onmouseout="div3.innerHTML=div3.innerHTML+'鼠标已经离开div3！'">
<p>div3</p></div>

运行效果如下图（这里可以看出鼠标只要移动一个像素就会触发一次onmousemove事件，会耗费许多系统资源，所以需谨慎使用）：
请添加图片描述
🔘2.鼠标点击事件
在HTML元素的属性中可设置的鼠标点击事件主要有4个：

onclick 事件：单击对象时触发的事件；
ondblclick 事件：双击对象时触发的事件；
onmousedown 事件：鼠标按键被按下时（未松开）触发的事件；
onmouseup 事件：鼠标按键被松开时触发的事件。

例2-2：
核心代码：

<div id="div1" onclick="div1.innerHTML=div1.innerHTML+'你的鼠标单击了div1'"><p>div1</p>
</div>
<div id="div2" ondblclick="div2.innerHTML=div2.innerHTML+'你的鼠标双击了div2'"><p>div2</p>
</div>
<div id="div3" onmousedown="div3.innerHTML=div3.innerHTML+'你的鼠标按下了div3'"><p>div3</p>
</div>
<div id="div4" onmouseup="div4.innerHTML=div4.innerHTML+'你的鼠标松开了div4'"><p>div4</p>
</div>

运行效果如下图：(下图鼠标的操作效果不是很明显😅，可复制代码上手试一试）
请添加图片描述

🔘此外，也可以通过CSS来设置鼠标的相关操作事件来改变元素的显示与样式。
以链接元素< a >为例，通过在CSS代码中对其属性visited、hover、active进行设计，使其呈现不同的颜色。

例2-3：
核心代码（CSS）：

a:visited{
	color: orange;
}
a:hover{
	color: green;
}
a:active{
	color: red;
}

运行效果图如下（鼠标放置在链接上时颜色变为绿色，点击时变为红色）：
请添加图片描述

3、页面加载与卸载事件💪

onload事件：在页面或图片加载完毕后立即发生
onbeforeunload事件：在页面卸载前发生的

一般网页都需要在初次加载时进行某些动作，所以onload事件是必不可少的。onbeforeunload还可以通过return来定义卸载前的弹出框内容，但是卸载事件在部分浏览器是无法自定义弹出框。

例3-1：
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面加载与卸载事件</title>
	</head>
	<body onload="alert('页面加载完毕！11111')" onbeforeunload="return'确认离开？11111'">
		<a href="">链接</a>
	</body>
</html>

运行效果如下图：
打开网页时，会之间弹出此框
在这里插入图片描述
点击链接跳转时，会弹出此框

4、获得与失去焦点事件👀

焦点事件类似于鼠标点击事件，当鼠标点击此元素即获得焦点，当鼠标又点击了其他地方则该元素失去焦点。

onfocus 事件：当对象获得焦点时触发的事件
onblur 事件：当对象失去焦点时触发的事件

示例4-1
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>焦点获取与失去事件</title>
		<script>
		function onFocus(x){
			x.style.background="#bef1ed";
		}
		function onBlur(x){
			x.style.background="white";
		}
		</script>
	</head>
	<body>
		<form>
			账户：<input type="text" placeholder="请输入账号名" onfocus="onFocus(this)" onblur="onBlur(this)"/>
			<br />
			密码：<input type="password" placeholder="请输入密码" onfocus="onFocus(this)" onblur="onBlur(this)"/>
		</form>
	</body>
</html>

运行效果图如下：（当输入框获得焦点时将变为浅蓝色，失去焦点则变回白色）
请添加图片描述

5、键盘事件⌨

onkeydown 事件，当按下一个键盘按钮时（未松开）触发的事件；
onkeyup 事件，当一个按钮被释放时触发的事件；
onkeypress 事件，当按下一个按键并释放时触发的事件。

注：onkeypress事件不能适用于所有按键（如 Alt、Ctrl、Shift、Esc键），也不适用于一次按键输入两个相同字符的情况。

示例5-1：
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>按键事件</title>
		<script>
		function down(){
			var div1=document.getElementById("div1");
			div1.innerHTML="你按下了按键！";
		}
		function up(){
			div1.innerHTML=div1.innerHTML+" 你松开了按键！";
		}
		function press(){
			div1.innerHTML=div1.innerHTML+" 你按下并释放了一个按键！";
		}
		</script>
	</head>
	<body>
		<form>
			请在输入框内按下一个按键：
			<br />
			<input type="text" onkeydown="down()" onkeyup="up()" onkeypress="press()"/>
		</form>
		<div id="div1"></div>
	</body>
</html>

运行效果如下：
请添加图片描述

6、提交与重置事件🛒

提交与重置事件一般用于表单中。

onsubmit 事件，表单提交时触发的事件；
onreset事件，表单被重置后触发的事件。

示例6-1：
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>提交与重置事件</title>
	</head>
	<body>
		<form action="" onsubmit="submitFun()" onreset="resetFun()">
			请在输入框内按下一个按键：
			<br />
			<input type="text" name="interest" id="interest1"/>
			<br />
			<input type="submit" value="提交"/>
			<input type="reset" value="重置" />
		</form>
		<script>
		function submitFun(){
			alert("表单已提交！");

		}
		function resetFun(){
			alert("表单已重置！");
		}
		</script>
	</body>
</html>

运行效果如下图：
请添加图片描述

7、选择与改变事件🎫

onselect事件，当文本内容被选中时触发的事件；
onchange事件，当域的内容发生改变时触发的事件。

这里，onselect属性常用于 type=“file"或"password"或"text”、< keygen 和< textarea >；onchange属性常用于单选按钮和复选框改变后触发的事件。

示例7-1：
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>选择与改变事件</title>
	</head>
	<body>
		<input type="text" value="请选中文本框中的一些文本" onselect="myFunction1()" onchange="myFunction2()"/>
		<br />
			
		<script>
		function myFunction1(){
			alert("你选中了文本框中的一些文本");
		}
		function myFunction2(){
			alert("你改变了文本框中的一些文本");
		}
		</script>
	</body>
</html>