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

javaScript——DOM续（六）

news 来源：原创 2025/5/12 4:39:42

滚轮事件

在 Web 开发中监听鼠标滚轮事件时，不同浏览器存在差异。下面是对 onmousewheel、DOMMouseScroll 和标准 wheel 事件的完整说明和兼容写法。

🌀 `onmousewheel` 事件概览

onmousewheel 是早期浏览器（如 IE 和 Chrome）支持的鼠标滚轮事件。
Firefox 不支持 onmousewheel，而是使用 DOMMouseScroll。

element.onmousewheel = function(e) {console.log('滚轮滚动：', e.wheelDelta);
};

🦊 Firefox 中使用 `DOMMouseScroll`

DOMMouseScroll 是 Firefox 早期版本支持的事件，只能使用 addEventListener 绑定：

element.addEventListener('DOMMouseScroll', function(e) {console.log('Firefox 滚轮滚动：', e.detail);
});

e.detail：
- 正数：向下滚
- 负数：向上滚

✅ 推荐使用现代标准事件 `wheel`

wheel 是现代浏览器支持的标准滚轮事件：

element.addEventListener('wheel', function(e) {console.log('标准滚动事件：', e.deltaY);
});

e.deltaY > 0 表示向下滚，< 0 表示向上滚

🧩 跨浏览器统一写法

function addMouseWheel(element, handler) {if ('onwheel' in document) {// 标准事件element.addEventListener('wheel', handler);} else if ('onmousewheel' in document) {// Chrome 和 IEelement.addEventListener('mousewheel', handler);} else {// Firefox 老版本element.addEventListener('DOMMouseScroll', handler);}
}addMouseWheel(document, function(e) {e = e || window.event;const delta = e.wheelDelta || -e.detail || -e.deltaY;if (delta > 0) {console.log('🟢 向上滚');} else {console.log('🔻 向下滚');}// 阻止默认滚动行为e.preventDefault ? e.preventDefault() : (e.returnValue = false);
});

✅ 注意点

wheelDelta 表现向上/下滚动的数值，但在火狐中需要使用detail
当滚轮滚动时，若浏览器有滚动条，滚动条会随之滚动，若不希望发生，则使用return false 取消
使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false，需要使用event.preventDefault()
IE8 中，event.preventDefault()不能使用

✅ 总结对比表格

事件名	支持浏览器	是否标准	如何绑定
`onmousewheel`	Chrome、IE	❌ 非标准	`onmousewheel` 或 `addEventListener`
`DOMMouseScroll`	Firefox	❌ 非标准	只能用 `addEventListener`
`wheel`	所有现代浏览器	✅ 推荐使用	推荐使用 `addEventListener`

键盘事件

在 Web 开发中，键盘事件是用户交互中非常常见的一类。主要有三个核心事件：

keydown：键盘按下时触发（持续触发）
keypress：按下字符键时触发（已废弃）
keyup：键盘释放时触发

1️⃣ keydown

事件在按键被按下时触发。
适用于所有键（包括功能键如 Ctrl、Shift、Arrow 等）。
可以持续触发（长按）。

document.addEventListener('keydown', function(e) {console.log('按下：', e.key, e.code);
});

2️⃣ keypress（⚠️ 已废弃）

只对字符键有效（如 a-z、0-9、空格等）。
功能键（如 Shift、Enter、Esc）不会触发该事件。
在现代浏览器中已经被弃用，不推荐使用。

document.addEventListener('keypress', function(e) {console.log('keypress：', e.key);
});

⚠️ 建议改用 keydown 代替。

3️⃣ keyup

在键盘释放时触发。
常用于输入完成后的处理，例如表单提交、命令执行等。

document.addEventListener('keyup', function(e) {console.log('松开：', e.key);
});

🔑 常用属性说明

属性	说明
`e.key`	按下的键的值（如 “a”, “Enter”）
`e.code`	实体键的编码（如 “KeyA”, “Enter”）
`e.keyCode`	旧标准中的键码（已废弃，仍可用）
`e.ctrlKey`	是否按住了 Ctrl 键
`e.shiftKey`	是否按住了 Shift 键
`e.altKey`	是否按住了 Alt 键

🔄 键值举例（e.key）

键	`e.key` 值	`e.code` 值
A	“a” / “A”	“KeyA”
Enter	“Enter”	“Enter”
空格	" "	“Space”
Shift	“Shift”	“ShiftLeft” / “ShiftRight”
↑（上箭头）	“ArrowUp”	“ArrowUp”

🧩 实战示例：检测组合键 Ctrl + S

document.addEventListener('keydown', function(e) {if (e.ctrlKey && e.key.toLowerCase() === 's') {e.preventDefault(); // 阻止浏览器保存行为alert('已触发 Ctrl + S');}
});

✅ 总结对比表

事件名	触发时机	是否支持所有键	是否被废弃
`keydown`	键按下时	✅ 是	❌ 否
`keypress`	字符键按下时	❌ 仅字符键	⚠️ 是
`keyup`	键释放时	✅ 是	❌ 否

📌 小贴士

开发中推荐使用 keydown + keyup，不要再使用 keypress。
若需判断组合键（如 Ctrl + S、Alt + F4），可配合 e.ctrlKey、e.altKey 使用。
e.keyCode 虽然仍可用，但已被标准废弃，应改用 e.key 和 e.code。

利用左右上下，让页面中的方块移动

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.circle {width: 100px;height: 100px;background-color: red;position: absolute;}</style></head><body><div class="circle" id="box1"></div></body><script type="text/javascript">let box1 = document.getElementById("box1");document.onkeydown = function(event) {event = event || window.event;if (event.keyCode == 37) {box1.style.left = box1.offsetLeft- 10 +"px";console.log(box1.style.left)}if (event.keyCode == 39) {box1.style.left = box1.offsetLeft+10 +"px";console.log(box1.style.left)}if (event.keyCode ==38) {box1.style.top = box1.offsetTop-10 +"px";console.log(box1.style.top)}if (event.keyCode ==40) {box1.style.top = box1.offsetTop+10 +"px";console.log(box1.style.top)}return false}</script>
</html>

javaScript——DOM续（六）

滚轮事件在 Web 开发中监听鼠标滚轮事件时，不同浏览器存在差异。下面是对 onmousewheel、DOMMouseScroll 和标准 wheel 事件的完整说明和兼容写法。 🌀 onmousewheel 事件概览 onmousewheel 是早期浏览器（如 IE 和 Chrome）支持…...

编程日记 2025/5/12 4:39:42

MySQL 服务搭建

💢欢迎来到张翊尘的开源技术站 💥开源如江河，汇聚众志成。代码似星辰，照亮行征程。开源精神长，传承永不忘。携手共前行，未来更辉煌💥 文章目录在线安装Ubuntu/Debian更新系统包索引安装 MySQL …...

编程日记 2025/5/2 5:26:23

https://github.com/PX4/eigen Eigen在Qt中的配置（博主亲测） 1、Qt中调用 //.pro中-------- INCLUDEPATH \$$PWD/eigen-master//.cpp中------- #include <Eigen/Dense> using namespace Eigen;Matrix2d a; MatrixXd b(2,2); Vector3d v(1,2,3);…...

编程日记 2025/5/12 3:56:20

【云原生】基于Centos7 搭建Redis 6.2 操作实战详解

目录一、前言二、Redis 6.2 安装过程 2.1 下载安装包 2.2 安装包解压 2.3 安装包编译 2.3 安装 2.4 启动redis 2.4.1 前台启动（不推荐） 2.4.2 后启动（推荐） 2.4.3 关闭redis服务 2.4.4 设置客户端连接三、写在最后 …...

编程日记 2025/5/12 4:15:52

《TCP/IP详解卷1：协议》之第九章：IP选路

目录一、IP选路之IP层工作流程二、选路原理三、路由表中的五种不同的标志（flag） 四、路由表的初始化 1、静态路由表初始化 ①、手动配置 ②、默认网关配置 2、动态路由表初始化 ①、路由协议的作用 ②、直接连接网络的自动发现五、没有到达…...

编程日记 2025/5/2 5:26:21

HTTP知识速通

一.HTTP的基础概念首先了解HTTP协议，他是目前主要使用在应用层的一种协议 http被称为超文本传输协议而https则是安全的超文本传输协议本章节的内容首先就是对http做一个简单的了解。 HTTP是一种应用层协议，是基于TCP/IP协议来传递信息的。其中…...

编程日记 2025/5/2 5:25:20

npm命令介绍（Node Package Manager）

文章目录 npm命令全解析简介基础命令安装npm（npm -v检插版本）初始化项目（npm init）安装依赖包（npm install xxx、npm i xxx） 依赖管理精解依赖类型区分（生产环境依赖dependencies、开发环境依赖…...

编程日记 2025/5/2 5:25:20

在 Windows 上启用 Telnet 命令

在 Windows 上启用打开 Telnet 命令 Telnet 是一种用于远程访问和管理计算机的协议。尽管存在安全漏洞，Telnet 仍然被广泛用于初始网络硬件配置、远程访问、端口测试等任务。在 Windows 10 和 11 上，可以通过多种方法启用 Telnet 客户端。使用控制面板…...

编程日记 2025/5/2 5:25:19

网络安全零基础培训 L1-9 PHP连接MySQL数据库

使用MySQLi扩展 MySQLi 是 “MySQL Improved Extension” 的缩写，它是 PHP 用于与 MySQL 数据库进行交互的扩展。 step1：连接数据库 <?php// 定义数据库服务器的地址，通常 localhost 表示本地服务器$servername "服务器地址&quo…...

编程日记 2025/5/2 5:25:18

Python生活手册-文件二进制：从快递柜到生鲜冷链的数据保鲜术

一、快递柜与冷链运输：两种存取哲学 1. 普通快递柜（文本模式） 日常存取包裹的智能快递柜就像文本模式，系统会自动处理包裹的包装： with open(快递单.txt, r, encodingutf-8) as 快递柜:包裹内容快递柜.read() # …...

编程日记 2025/5/2 5:25:17

CUDA从入门到放弃

1 CUDA简介 GPU为图形处理器, 也是显卡的“大脑”显卡集成了GPU, 显存和其他电路的硬件GPU: 计算密集型CPU: 逻辑流控制GPU性能指标: 核心数GPU显存容量GPU计算峰值显存带宽 GPU不能单独计算, CPUGPU组成异构计算架构CPU起到控制作用, 一般成为主机(Host), GPU可以看作CPU的协…...

编程日记 2025/5/12 4:32:04

Golang多人在线坦克对战游戏(帧同步)

以下是一个简化但完整的同步帧游戏示例——实现一个多人在线坦克对战游戏。代码分为服务器和客户端两部分，使用UDP协议通信。我们将重点讲解核心同步机制。项目结构 sync-frame-game/ ├── server/ │ ├── main.go # 游戏服务器主逻辑 │ └── game_stat…...

编程日记 2025/5/2 5:24:15

MySQL | DQL语句-连接查询

MySQL | DQL语句-连接查询 🪄个人博客：https://vite.xingji.fun 什么是连接查询从一张表中查询数据称为单表查询。从两张或更多张表中联合查询数据称为多表查询，又叫做连接查询。什么时候需要使用连接查询？ 比如这样的需求&…...

编程日记 2025/5/2 5:24:14

JVM——Java 虚拟机是如何加载 Java 类的？

引入在 Java 世界的底层运作中，类加载机制扮演着一个既神秘又关键的角色。它就像是一个精心设计的舞台幕后 machinery，确保了 Java 程序能够顺利运行。今天，我们就深入探索 Java 虚拟机（JVM）是如何加载 Java 类的。 …...

编程日记 2025/5/10 4:00:45

Sigmoid函数导数推导详解

Sigmoid函数导数推导详解在逻辑回归中，Sigmoid函数的导数推导是一个关键步骤，它使得梯度下降算法能够高效地计算。 1. Sigmoid函数定义首先回顾Sigmoid函数的定义： g ( z ) 1 1 e − z g(z) \frac{1}{1 e^{-z}} g(z)1e−z1 2. 导…...

编程日记 2025/5/12 2:07:29

运维工作中，Ansible常用模块有哪些？

Ansible是一个强大的自动化运维工具，他通过模块来执行各种任务。Ansible的模块库非常丰富，涵盖了系统管理、文件操作、软件包管理、网络配置、云服务等多个领域。以下是Ansible中常见的模块分类及具体模块详细介绍： 系统管理模块主要用于管…...

编程日记 2025/5/12 4:27:40

内存安全的攻防战：工具链与语言特性的协同突围

一、内存安全：C 开发者永恒的达摩克利斯之剑在操作系统内核、游戏引擎、金融交易系统等对稳定性要求苛刻的领域，内存安全问题始终是 C 开发者的核心挑战。缓冲区溢出、悬空指针、双重释放等经典漏洞，每年在全球范围内造成数千亿美元的损失。…...

编程日记 2025/5/9 23:58:14

Linux-04-搜索查找类命令

一、find查找文件或目录: 1.基本语法: find指令将从指定目录向下递归地遍历其各个子目录1，将满足条件的文件显示在终端 find[搜索范围] [选项] 2.选项说明: 选项功能-name <查询方式>按照指定的文件名查找模式查找文件-user <用户名>查找属于指定用…...

编程日记 2025/5/12 4:09:21

移动光猫 UNG853H 获取超级管理员账号密码

注：电脑连接光猫，网线不要接2口（2口一般是IPTV网口） 首先浏览器打开 192.168.1.1，使用光猫背面的用户名密码登录。（user用户名） 然后在浏览器中另开一个窗口打开以下地址： http://…...

编程日记 2025/5/2 5:21:07

健康生活新主张：全方位养生指南

在追求高品质生活的今天，健康养生早已不是老年人的专属话题，而是每个人都该掌握的生活技能。科学养生不需要复杂的程序，而是通过日常习惯的优化，为身体注入源源不断的活力。饮食管理是健康的根基。选择天然、少加工的食材&#x…...

编程日记 2025/5/2 5:21:07

py使用uniad原生sdk 3, 放弃Buildozer，使用BeeWare

目前，Buildozer 支持打包： Android：通过 Python for Android。您必须有 Linux 或 OSX computer 才能为 Android 进行编译。 iOS：通过 Kivy iOS。您必须拥有 OSX computer 才能为 iOS 进行编译。支持其他平台在路线图中&#xf…...

编程日记 2025/5/2 5:21:06

【数据分享】2020年中国高精度森林覆盖数据集（免费获取）

森林作为全球陆地生态系统的主体，分布面积广、结构复杂，承担着调节气候、维护生态安全、改善环境等方面的重要作用。我国的森林资源丰富，据《中国森林资源报告：2014—2018》统计，我国森林覆盖率已经达到23.04%。森林覆…...

编程日记 2025/5/2 5:21:05

（007）Excel 公式的使用

文章目录逻辑运算公式的参数常用函数引用方式引用工作表和工作簿表格的引用修改公式的计算时机区域交叉引用逻辑运算公式的参数单元格引用：SUM(A1:A24)。字面值：SQRT(121)。字面文本字符串：PROPER(“john.f.smith”)。表达式&#xff1a…...

编程日记 2025/5/2 5:20:04

Vue之脚手架与组件化开发

一、基础知识 1、准备工作 node版本在12以上（看情况而变） 全局安装vue/cli脚手架（不理解的可以去看一下node安装环境配置教程） npm i vue/cli -g 2、项目初始化在终端输入 vue create my-vue-project(这里是名字&#xff0…...

编程日记 2025/5/2 5:20:03

第四章 Maven

01 01. maven-课程介绍 02 02. maven-概述-maven介绍私服：提高下载效率，让中央仓库不必被反复访问。我们一般用阿里云的私服。 03 03. maven-概述-maven安装 04 04. maven-idea集成-配置及创建maven项目 05 05. maven-idea集成-导入maven项目 06 06. …...

编程日记 2025/5/2 5:20:03

哈希表笔记（四）Redis对比Java总结

文章目录一、基础结构对比数据结构定义Java HashMapRedis字典主要区别与设计思路二、关键操作API对比初始化Java HashMapRedis字典添加元素Java HashMapRedis字典查找元素Java HashMapRedis字典删除元素Java HashMapRedis字典扩容/重哈希操作Java HashMapRedis字典三、…...

编程日记 2025/5/2 5:19:00

【精选】基于数据挖掘的广州招聘可视化分析系统(大数据组件+Spark+Hive+MySQL+AI智能云+DeepSeek人工智能+深度学习之LSTM算法）

博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台…...

编程日记 2025/5/2 5:18:59

WPF使用依赖注入框架AutoMapper

WPF应用中使用AutoMapper和依赖注入框架实现对象映射与依赖管理 1. 准备工作首先，通过NuGet安装必要的包： Install-Package AutoMapper Install-Package Autofac Install-Package Autofac.Extensions.DependencyInjection Install-Package Microsoft.Extensions.Dependen…...

编程日记 2025/5/2 5:17:58

WPF封装常用的TCP、串口、Modbus、MQTT、Webapi、PLC通讯工具类

WPF封装常用通讯工具类下面我将为您封装常用的TCP、串口、Modbus、MQTT、WebAPI和PLC通讯工具类，适用于WPF应用程序开发。一、TCP通讯工具类 using System; using System.Net.Sockets; using System.Text; using System.Threading.Tasks;public class TcpClientHelper : …...

编程日记 2025/5/2 5:17:57

游戏引擎学习第253天:重新启用更多调试界面

运行游戏，尝试调试系统，并为今天的工作设定方向。今天我们将继续完成调试编辑代码的收尾工作。虽然昨天已经让它运行起来了，但目前还在使用旧的GUID系统，以及调试系统里早期用于探索阶段的一些旧式实现。因此，我们需…...

编程日记 2025/5/2 5:16:56

C# ｜基于C#实现的BDS NMEA-0183数据解析上位机

以下是一个基于C#实现的BDS NMEA-0183数据解析上位机的示例代码，包含基础功能和界面： using System; using System.Collections.Generic; using System.IO.Ports; using System.Windows.Forms; using System.Drawing; using System.Globalization;namespace BDS_NMEA_Viewer…...

编程日记 2025/5/2 5:15:54

【AI提示词】成本效益分析师

提示说明专注于通过数据驱动的方式提供成本效益分析，帮助客户优化资源投入与预期回报。提示词 # Role: 成本效益分析师## Profile - language: 中文 - description: 专注于通过数据驱动的方式提供成本效益分析，帮助客户优化资源投入与预期回报 - ba…...

编程日记 2025/5/2 5:15:54

Kotlin革新数据分析

摘要在数据分析领域，Python长期占据主导地位。然而，随着技术的不断发展，Kotlin凭借其独特优势逐渐崭露头角。本文深入探讨Kotlin在数据分析中的应用，详细阐述其与Python在数据分析生态系统中的差异，通过具体案例展示…...

编程日记 2025/5/2 5:15:53

今日行情明日机会——20250430

指数目前仍然在震荡区间，等后续的方向选择以及放量后的主线~ 2025年4月30日涨停主要行业方向分析一、核心主线方向机器人概念（政策催化技术突破） • 涨停家数：18家。 • 代表标的： ◦ 全筑股份（工业机器…...

编程日记 2025/5/2 5:15:53

【Docker】Dockerfile 使用

文章目录 1. 什么是 Dockerfile？2. Dockerfile 核心指令详解2.1 基础指令2.2 构建过程指令2.3 运行时指令2.4 容器启动指令3. Dockerfile 最佳实践3.1 优化镜像构建3.2 安全性增强3.3 多阶段构建4. 完整 Dockerfile 示例5. 构建与验证6. 总结Docker 作为容器化技术的代表，已经…...

编程日记 2025/5/2 5:14:51

【Hive入门】Hive性能调优之资源配置：深入解析执行引擎参数调优

目录前言 1 Hive执行引擎概述 2 MapReduce引擎调优 2.1 Map阶段资源配置 2.2 Reduce阶段资源配置 2.3 并发控制参数 3 Tez引擎调优 3.1 Tez架构概述 3.2 内存配置 3.3 并发与并行度 4 Spark引擎调优 4.1 Spark执行模型 4.2 内存管理 4.3 并行度配置 5 资源隔离…...

编程日记 2025/5/2 5:13:49

初学python的我开始Leetcode题8-3

提示：100道LeetCode热题-8-3主要是二叉树相关，包括三题：将有序数组转换为二叉搜索树、验证二叉搜索树、二叉搜索树中第K小的元素。由于初学，所以我的代码部分仅供参考。目录前言题目1：将有序数组转换为二叉搜索树…...

编程日记 2025/5/2 5:13:49

【音频】Qt6实现MP3播放器

1、简介解码MP3有很多种方法，比如：FFmpeg、GStreamer、Qt、libmpg123 库等，下面介绍使用，只使用Qt的接口方法解码、播放MP3。开发配置： 1）操作系统：Windows11 2）Qt版本：Qt6.5.1 3）编译器：MinGW_64 2、获取音频输出设备 QMediaDevices 用于获取媒体设备，包括音…...

编程日记 2025/5/2 5:13:48

【Linux】VSCode用法

描述部分图片和经验来源于网络，若有侵权麻烦联系我删除，主要是做笔记的时候忘记写来源了，做完笔记很久才写博客。专栏目录：记录自己的嵌入式学习之路-CSDN博客 1 安装环境及运行C/C 1.1 安装及配置步骤请参考这位大佬的…...

编程日记 2025/5/2 5:13:48

普通 html 项目也可以支持 scss_sass

项目结构示例下载vscode的插件Live Sass Compiler 自动监听编译scss 下载插件Live Server 用于 web 服务器，打开 html 文件到浏览器，也可以不用这个，自己用 nginx 或者宝塔其他 web 工具新建一个 index.scss打开，点击 vscode 底…...

编程日记 2025/5/2 5:13:47

C#实现主流PLC读写工具类封装

以下是针对三菱、欧姆龙、西门子S7系列、汇川、台达PLC的完整封装工具类实现，基于Modbus TCP/RTU、MC协议、QJ71等主流通信协议：基础接口定义 /// <summary> /// PLC操作基础接口 /// </summary> public interface IPLC {/// <summary>/// 连接PLC/// &…...

编程日记 2025/5/2 5:12:45