当前位置： 首页 > news >正文

〖大前端 - 基础入门三大核心之JS篇㊷〗- DOM事件对象及它的属性

news 2025/11/26 6:21:17
  • 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！
  • 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作，目前在公司担任研发部门CTO。
  • 荣誉：2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。
  • 🏆 白宝书系列
    • 🏅 启示录 - 攻城狮的自我修养
    • 🏅 Python全栈白宝书
    • 🏅 ChatGPT实践指南白宝书
    • 🏅 产品思维训练白宝书
    • 🏅 全域运营实战白宝书
    • 🏅 大前端全栈架构白宝书

文章目录

  • ⭐ 事件对象
    • 🌟 事件对象中的鼠标的属性
    • 🌟 事件对象中的键盘属性

⭐ 事件对象

事件对象： 事件处理函数提供一个形式参数，它是一个对象，封装了本次事件的细节，这个参数通常用单词event或字母e来表示

示例代码：

oBox.onmousemove = function (e) {//对象e就是这次事件的“事件对象”
}；

事件对象中有很多的强大的属性和方法，我们可以直接拿来使用。接下来，接下来我们来看一些常用的属性和方法：

🌟 事件对象中的鼠标的属性

鼠标位置属性就是在鼠标事件中，描述鼠标位置的一些属性

属性属性描述
clientX鼠标指针相对于浏览器的水平坐标
clientY鼠标指针相对于浏览器的垂直坐标
pageX鼠标指针相对于整张网页的水平坐标
pageY鼠标指针相对于整张网页的垂直坐标
offsetX鼠标指针相对于事件源元素的水平坐标
offsetY鼠标指针相对于事件源元素的垂直坐标

我们用一张图来解释这些属性具体指的是什么（因为浏览器框可能不能完全展示整个网页，需要用右侧的滚动条滚动才能看见，下图种用虚线框代表整个网页）：

image-20230420141650889

使用这些属性的示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}#box {width: 200px;height: 200px;background-color: #ccc;margin: 100px;}body {height: 2000px;}#info {font-size: 20px;margin-left: 100px;}</style>
</head>
<body><div id="box"></div><div id="info"></div><script>var oBox = document.getElementById('box');var oInfo = document.getElementById('info');oBox.onmousemove = function (e) {oInfo.innerHTML = 'offsetX/Y:   ' + e.offsetX + ',' + e.offsetY + '<br>' + 'clientX/Y:   ' + e.clientX + ',' + e.clientY + '<br>'+ 'pageX/Y:   ' + e.pageX + ',' + e.pageY;};</script>
</body>
</html>

image-20230420161900202

上述代码中，如果页面为往下滚动，那么clientX/Y和pageX/Y的值会是一模一样的，很好理解，因为网页正处于最上方，和浏览器的坐标系是重叠的。当页面往下滚动后，两者才会出现差异。

需要注意的是，DOM中规定：offsetX和offsetY是鼠标所在之处的最内部盒子的坐标，比如下面的代码中，虽然我们设置的是大盒子的事件监听，但当鼠标放到小盒子中时，offsetX和offsetY显示是以小盒子为基准的坐标：image-20230420162152804

事件对象中鼠标滚轮事件onmousewheel也有属性——deltaY，表示鼠标滚轮滚动方向，向下滚动时返回正值，向上滚动时返回负值

示例代码：

<body><div id="box"></div><script>document.onmousewheel = function (e) {console.log(e.deltaY);}</script>
</body>

在这里插入图片描述


🌟 事件对象中的键盘属性

e.charCode属性 通常用于onkeypress事件中，表示用户输入字符的字符码

e.keyCode属性 通常用于onkeydown事件和onkeyup事件中，表示用户按下的按键的“键码”（键盘上每一个按键都会对应一个键码）

关于字符按键和字符码的对应关系如下：

字符对应的字符码（charCode）
数字0~948~57
大写字母A~Z65~90
小写字母a~z97~122

关于按键和键码的对应关系如下：

按键对应的键码（keyCode）
数字0~948~57（同charCode）
字母不分大小写a~z65~90
四个方向键⬅⬆➡⬇37、38、39、40
回车键13
空格键32

使用这些属性的示例代码：

<body><input type="text" id="field1"><div id="info1"></div><input type="text" id="field2"><div id="info2"></div><script>var oField1 = document.getElementById('field1');var oInfo1 = document.getElementById('info1');var oField2 = document.getElementById('field2');var oInfo2 = document.getElementById('info2');oField1.onkeypress = function (e) {oInfo1.innerText = '您按键的对应的字符码是：' + e.charCode;};oField2.onkeydown = function (e) {oInfo2.innerText = '您按键的对应的键码是：' + e.keyCode;};</script>
</body>

image-20230420193534953

学到这里，我们可能还是不知道这个字符码和键码在实际工作中有什么用，接下来就来写一个有意思的小案例来实际应用一下这两个属性。

案例： 制作一个特效，按方向键可以控制页面上的盒子按对应的方向移动

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}#box {width: 100px;height: 100px;background-color: orange;position: absolute;top: 200px;left: 200px;}</style>
</head><body><div id="box"></div><script>var oBox = document.getElementById('box');//定义两个全局变量，分别表示盒子top属性和left属性var t = 200;var l = 200;//document对象的键盘按下事件监听，即对用户在整个网页上按下按键时进行事件监听document.onkeydown = function (e) {switch (e.keyCode) {case 37:l -= 3;break;case 38:t -= 3;break;case 39:l += 3;break;case 40:t += 3;break;}//更改样式oBox.style.top = t + 'px';oBox.style.left = l + 'px';};</script>
</body>
</html>

image-20230420201100806

相关文章：

〖大前端 - 基础入门三大核心之JS篇㊷〗- DOM事件对象及它的属性

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…...

编程日记 2023/11/26 10:39:24

如何搭建zerotier服务器组网实现内网穿透

小白花了四天的下班时间终于把zerotier网络调通&#xff0c;此刻坐在桌前舒畅地喝口茶&#xff5e;&#xff5e; 下面来详细记录下这几天踩的坑&#xff1a; 起因就在于一直在iPad上用向日葵连接公司电脑的我觉得向日葵的界面用的实在难受&#xff0c;vs code操作十分不灵光&…...

编程日记 2023/11/26 10:38:22

【C++】构造函数和析构函数第四部分（深拷贝和浅拷贝）--- 2023.11.25

目录 什么是浅拷贝&#xff1f;浅拷贝的问题使用深拷贝解决浅拷贝问题结束语 什么是浅拷贝&#xff1f; 如果在一个类中没有人为定义拷贝函数&#xff0c;则系统会提供默认拷贝函数。那么在此默认拷贝函数中主要进行了简单的赋值操作&#xff0c;那这个简单的赋值操作我们一般…...

编程日记 2023/11/26 10:36:20

加速软件开发：自动化测试在持续集成中的重要作用！

持续集成的自动化测试 如今互联网软件的开发、测试和发布&#xff0c;已经形成了一套非常标准的流程&#xff0c;最重要的组成部分就是持续集成&#xff08;Continuous integration&#xff0c;简称CI&#xff0c;目前主要的持续集成系统是Jenkins&#xff09;。 那么什么是持…...

编程日记 2023/11/26 10:35:19

工具及方法 - 查找排名：国内网络作家排名

中国十大网络小说作家排名&#xff0c;在买购网的排名&#xff1a; 中国十大网络小说作家 网络小说作家排行榜 中国著名网络写手排名→MAIGOO生活榜 &#xff08;这个网站里还有很多其他的排名。&#xff09; 1&#xff0c;唐家三少 2&#xff0c;辰东 3&#xff0c;我吃西红…...

编程日记 2023/11/26 10:34:17

MySQL INSERT插入条件判断：如果不存在则插入

MySQL INSERT插入条件判断&#xff1a;如果不存在则插入&#xff08;转&#xff09; 我们经常需要进行sql的批量插入&#xff0c;要求&#xff1a;该条记录不存在则插入&#xff0c;存在则不插入。如果使用一条INSERT语句实现呢&#xff1f; ####普通的 INSERT INTO 插入&…...

编程日记 2023/11/26 10:33:16

CSM32RV003：国产高精度16位ADC低功耗RISC-V内核MCU

目录 高精度ADC工业应用工业数据采集应用CSM32RV003简介主要特性 高精度ADC工业应用 高精度ADC即高精度模数转换器&#xff0c;是一种能够将输入模拟信号转换为数字信号的芯片&#xff0c;在多种消费电子、工业、医疗和科研领域都有广泛应用。高精度ADC的主要特点是能够提供高…...

编程日记 2023/11/26 10:32:15

65道常问前端面试题总结react

面试题总结 一.Axios的实现原理 Axios 是一个基于 Promise 的 HTTP 客户端库&#xff0c;用于浏览器和 Node.js 环境。它可以发送 HTTP 请求并处理响应数据。下面是 Axios 实现的基本原理&#xff1a; 封装请求&#xff1a;Axios 提供了一个简单易用的 API&#xff0c;使得开…...

编程日记 2023/11/26 10:31:14

单片机学习1——点亮一个LED灯

Keil软件编写程序&#xff1a; 特殊功能寄存器声明&#xff1a; #include<reg52.h>sbit LED P1^0;void main() {LED 0;while(1); } 代码说明&#xff1a; sbit 语句是特殊功能位声明。 生成HEX文件&#xff0c;这个文件是下载到单片机里的文件。Options for Target…...

编程日记 2023/11/26 10:30:11

PyCharm 配置sqlite3驱动下载问题

单击View -> Tool Windows -> Database&#xff0c;打开Database窗体&#xff0c;之后进行配置&#xff0c;下载驱动包失败&#xff01; 解决 &#xff08;1&#xff09;下载Sqlite3驱动 下载地址: Central Repository: org/xerial/sqlite-jdbc 选择的版本是3.34.0,下载…...

编程日记 2023/11/26 10:28:10

NVMe-oF E-JBOF设计解析：WD RapidFlex网卡、OpenFlex Data24

OpenFlex Data24 NVMe-oF Storage Platform WD的SN840 NVMeSSD新品并没有太吸引我注意&#xff0c;因为它还是PCIe 3.0接口的&#xff0c;要知道Intel的PCIe 4.0 SSD都已经推出了。 但上面这个NVMe-oF&#xff08;NVMe over Fabric&#xff09;EBOF&#xff08;区别于普通JBO…...

编程日记 2023/11/26 10:27:09

visual studio 下的git

我这个是看视频笔记 YouTube : https://www.youtube.com/watch?vgkDASVE_Hdg 主要内容是&#xff1a;建立git 库&#xff0c; 保存commit&#xff0c; 建立分支 create branch, 合并分支merge branch,比较 diff&#xff0c;Revert ,history,delete branch, rename branch, t…...

编程日记 2023/11/26 10:26:08

[架构之路-249]：目标系统 - 设计方法 - 软件工程 - 需求工程- 需求开发：如何用图形表达需求，结构化方法的需求分析

目录 一、概述 二、数据模型&#xff1a;E-R图/实体关系图&#xff08;数据单元之间的结构关系&#xff09; 三、功能模型&#xff1a;数据流图DFD&#xff08;逻辑运算&#xff0c;包括输入和输出&#xff0c;实体之间的关系&#xff09;&#xff1a;输入》处理 》 输出 四…...

编程日记 2023/11/26 10:25:07

Django之中间件与CSRF_TOKEN

文章目录 一、什么是中间件二、中间件有什么用三、Django自定义中间件中间件中主要方法及作用创建自定义中间件的步骤&#xff1a;process_request与process_response方法process_view方法process_exceptionprocess_template_response&#xff08;不常用&#xff09; 四、CSRF_…...

编程日记 2023/11/26 10:24:06

柑橘病害数据集（四类图像分类，没有打yolo标签）

1.文件夹分为训练集和测试集 在这个数据集中&#xff0c;有一类是新鲜柑橘&#xff0c;还有另外三种疾病&#xff0c;溃疡病、黑斑病和绿化病。 2.train文件夹 2.1.blackspot&#xff08;黑斑病&#xff09; 文件夹 206张照片 2.2.canker&#xff08;溃疡病&#xff09; 文…...

编程日记 2023/11/26 10:23:05

面向对象三大特性：封装，继承，多态；多态的机制；以及多态是如何实现的，实现的必要条件

文章目录 面向对象三大特性2.1.1 封装 继承 多态2.1.2 其中Java 面向对象编程三大特性&#xff1a;封装 继承 多态2.1.3 关于继承如下 3 点请记住&#xff1a;2.1.4 什么是多态机制&#xff1f;Java语言是如何实现多态的&#xff1f;2.1.5 Java实现多态有三个必要条件&#xff…...

编程日记 2023/11/26 10:22:04

Unity-类-Vector

Vector矢量 是一个基本的数学概念，它允许你描述方向和大小。在游戏和应用中，矢量通常用于描述一些基本属性，如角色的位置、物体移动的速度或两个物体之间的距离。 矢量算术是计算机编程很多方面（如图形、物理和动画）的基础，深入了解这一主题对于充分发挥 Unity 的功能很有…...

编程日记 2023/11/26 10:21:03

【腾讯云云上实验室】向量数据库相亲社交应用实践

快速入口 &#x1f449;向量数据库_大模型知识库_向量数据存储_向量数据检索- 腾讯云 (tencent.com) 文章目录 前言1. 向量数据库概念及原理1.1 向量数据库概念1.2 向量数据库核心原理1.3 向量数据库优缺点1.4 向量数据库与传统数据库的区别 2. 腾讯云向量数据库的基本特性及优…...

编程日记 2023/11/26 10:20:02

SpringCloud Netflix 知识点汇总

目录 SpringCloud概念：1、什么是springcloud？2、SpringCloud有哪些核心组件？3、什么是分布式？4、什么是微服务？5、分布式+微服务+集群6、微服务之间是如何独立通讯的Eureka1、什么是Eureka ？2、为什么使用Eureka？3、什么是Eureka自我保护机制4、Zookeeper 和 Eureka 区别…...

编程日记 2023/11/26 10:19:01

IO口电压下降那么多是怎么回事？？

前几天一个工程师向我反馈他测得如下电路MCU IO口的电压不是3.3V&#xff0c;只有2V多。 IO配置的是输入功能&#xff0c;无上下拉。最初我不太相信这个结果&#xff0c;后来自己用万用表实际测量了下&#xff0c;还真是这个结果 这是咋回事呢&#xff1f;不应该电压就是3.3V吗…...

编程日记 2023/11/26 10:16:59

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/11/24 21:26:17

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

编程新知 2025/11/16 22:43:11

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口 在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2025/10/12 2:43:11

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

编程新知 2025/11/1 2:00:51

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2025/11/22 23:16:30

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2025/11/25 11:12:48