一起来分析JavaScript五大事件

WBOY

发布时间：2022-03-25 19:08:21

2680人浏览过

来源于CSDN

转载

本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了javascript中的一些常用事件，包括鼠标事件、键盘事件、页面事件、焦点事件等等，希望对大家有帮助。

一起来分析JavaScript五大事件

相关推荐：javascript教程

页面事件

思考：HTML页面是按照什么样的顺序进行加载的？

答案：页面的加载是按照代码的编写顺序，从上到下依次执行的。

立即学习“Java免费学习笔记（深入）”；

会出现的问题：若在页面还未加载完成的情况下，就使用JavaScript操作DOM元素，会出现语法错误。

在这里插入图片描述

解决办法：页面事件可以改变JavaScript代码的执行时机。

load事件：用于body内所有标签都加载完成后才触发，又因其无需考虑页面加载顺序的问题，常常在开发具体功能时添加。
unload事件：用于页面关闭时触发，经常用于清除引用避免内存泄漏时使用。

在这里插入图片描述

焦点事件

在Web开发中，焦点事件多用于表单验证功能，是最常用的事件之一。

例如，文本框获取焦点改变文本框的样式，文本框失去焦点时验证文本框内输入的数据等。

在这里插入图片描述

为了让大家更好的掌握焦点事件的使用方法，下面以验证用户名和密码是否为空进行演示。

在这里插入图片描述

代码实现

验证用户名和密码是否为空

用户名：

密　码：

鼠标事件

鼠标事件是Web开发中最常用的一类事件。

例如，鼠标滑过时，切换Tab栏显示的内容；利用鼠标拖拽曳状态框，调整它的显示位置等，这些常见的网页效果都会用到鼠标事件。

在这里插入图片描述

在项目开发中还经常涉及一些常用的鼠标属性，用来获取当前鼠标的位置信息。

在这里插入图片描述

IE6—8浏览器中不兼容pageX和pageY属性。因此，项目开发时需要对IE6~8浏览器进行兼容处理。

在这里插入图片描述

鼠标在文档中的坐标等于鼠标在当前窗口中的坐标加上滚动条卷去的文本长度。

为了让大家更好的理解鼠标事件的使用，以圆形显示鼠标单击位置为例演示。

在这里插入图片描述

代码实现

显示鼠标单击位置

【案例】鼠标拖曳特效

在这里插入图片描述

盒子的位置（left和top值）= 鼠标的位置（left和top值）- 鼠标按下时与盒子之间的距离（left和top值）。

举个例子

在这里插入图片描述

代码实现思路：

① 编写HTML，设计弹框用于实现拖拽特效。

② 为拖拽条添加mousedown事件及其处理程序。

Lyrics Generator

免费人工智能歌词生成器和人工智能歌曲作家

下载

③ 处理鼠标移动事件，实现鼠标的拖拽的特效。

④ 处理释放鼠标按键的事件，实现鼠标按钮松开后，弹框不再移动。

代码实现

鼠标拖动

注册信息 (可以拖拽) 【关闭】

键盘事件

键盘事件是指用户在使用键盘时触发的事件。

例如，用户按Esc键关闭打开的状态栏，按Enter键直接完成光标的上下切换等。

在这里插入图片描述

下面以Enter键切换的使用进行演示。具体如例所示。

在这里插入图片描述

代码实现

按Enter键切换

用户姓名：

电子邮箱：

手机号码：

个人描述：

注意

keypress事件保存的按键值是ASCII码，

keydown和keyup事件保存的按键值是虚拟键码。

具体参考MDN等手册

表单事件

表单事件指的是对Web表单操作时发生的事件。

例如，表单提交前对表单的验证，表单重置时的确认操作等。JavaScript提供了相关的表单事件。

在这里插入图片描述

下面以是否提交和重置表单数据为例进行演示。具体如例所示。

在这里插入图片描述

代码实现

	
	
	
	表单事件
	
	
	
	用户名：

动手实践

图片放大特效

分析如何实现图片放大特效：

准备两张相同的图片，小图和大图。
小图显示在商品的展示区域。
大图用于鼠标在小图上移动时，按比例的显示大图中的对应区域。

代码实现思路：

① 编写HTML页面，展示小图、隐藏鼠标的遮罩及大图。
② 当鼠标在小图上移动时，显示鼠标的遮罩和大图。
③ 当鼠标移动时，让遮罩跟着在小图中进行移动。
④ 限定遮罩在小图中的可移动范围。
⑤ 根据遮罩在小图中的覆盖范围，按比例的显示大图。

相关专题

js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

556

2023.06.20

js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

732

2023.07.04

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

477

2023.09.01

JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

414

2023.09.04

js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

991

2023.09.04

如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

552

2023.09.20