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

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

news 2026/1/30 7:39:05
  • 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加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

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/11/25 10:36:53

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/1/29 4:00:56

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/12/20 15:01:20

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/10/31 21:54:15

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2026/1/24 6:58:41

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

编程新知 2025/11/21 0:25:40