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

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

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

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/9/14 1:15:45

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/9/2 17:00:17

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/9/7 8:52:44

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/9/13 3:49:22

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/9/14 12:34:56

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/9/12 14:19:17

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2025/9/9 10:10:16

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/7/26 23:29:41

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2025/9/11 2:36:21