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

JavaScript基础(33)_鼠标滚轮滚动事件、键盘事件

news 2025/12/15 19:44:09

鼠标滚轮滚动事件：onwheel

获取鼠标滚轮滚动的方向：wheelDelta
比如：向上滚动：109 （所有正值都是向上）
          向下滚动：-109（所有负值都是向下）

注意：当滚动滚动时，如果浏览器有滚动条，滚动条会随之滚动。这是浏览器的默认行为，如果不希望发生，则可以使用return false，取消默认行为。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>鼠标滚轮滚动事件</title><style>#box1 {width: 100px;height: 100px;background-color: cadetblue;}</style><script>window.onload = function () {var box1 = document.getElementById("box1");box1.onwheel = function (event) {if (event.wheelDelta > 0) {if (box1.clientHeight >= 100)box1.style.height = box1.clientHeight - 20 + "px";elsebox1.style.height = 100;}else {box1.style.height = box1.clientHeight + 20 + "px";}return false;}}</script>
</head>
<body style="height: 2000px;height: 1000px;"><button id="box1">用鼠标滚轮实现变大变小</button>
</body>
</html>

键盘事件

键盘事件一般都会绑定给可以获取到焦点的对象或者是document。
onkeydown：某个键盘按键被按下。
onkeyup：某个键盘按键被松开。
注意：
1、对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发。
2、当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快。这种设计是为了防止误操作的发生。

如何识别用户按下的按键：
可以通过keyCode来获取按键的编码。通过它可以判断哪个按键被按下。除了keyCode，事件对象中还提供了几个属性：altKey、ctrlKey、shiftKey这三个用来判断alt、ctrl、shift是否按下。 如果按下则返回true，否则返回false。

注意：在文本框中输入内容，属于onkeydown的默认行为，如果在onkeydown中取消默认行为(return false)，则用键盘输入的内容，无法出现在文本框中。

案例1：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>键盘事件</title><script>window.onload = function(){var input = document.getElementsByTagName("input");document.onkeydown = function(event){event = event || window.event;// 不许输入数字if(event.keyCode >= 48 && event.keyCode <= 57){return false;}}}</script>
</head>
<body><input type="text">
</body>
</html>

案例2：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>键盘移动div</title><style>.box1 {width: 100px;height: 100px;background-color: aquamarine;position: absolute;}</style><script>window.onload = function () {var box1 = document.getElementsByClassName("box1")[0];document.onkeydown = function (event) {switch (event.keyCode) {// 向左case 37:if (box1.offsetLeft >= 18) {box1.style.left = box1.offsetLeft - 10 + "px";}// 碰到左上边界禁止div变大或变小else { box1.style.left = box1.offsetLeft + "px"; }break;// 向上case 38:if (box1.offsetTop >= 18) {box1.style.top = box1.offsetTop - 10 + "px";}// 碰到左上边界禁止div变大或变小else { box1.style.top = box1.offsetTop + "px"; }break;// 向右case 39:box1.style.left = box1.offsetLeft + 10 + "px"; break;// 向下case 40:box1.style.top = box1.offsetTop + 10 + "px"; break;}}}</script>
</head>
<body><div class="box1"></div>
</body>
</html>

相关文章：

JavaScript基础(33)_鼠标滚轮滚动事件、键盘事件

鼠标滚轮滚动事件&#xff1a;onwheel 获取鼠标滚轮滚动的方向&#xff1a;wheelDelta 比如&#xff1a;向上滚动&#xff1a;109 &#xff08;所有正值都是向上&#xff09; 向下滚动&#xff1a;-109&#xff08;所有负值都是向下&#xff09; 注意&#xff1a;当…...

编程日记 2024/8/18 19:26:28

怎样做网站推广

拥有一个精致而富有吸引力的网站是成功商业运营的关键。然而&#xff0c;仅仅拥有一个网站是不够的&#xff0c;您还需要通过有效的推广策略吸引更多的访问者。以下是一些成功的网站推广策略&#xff0c;帮助您提升流量并增加知名度。 1. 优化SEO&#xff1a; 搜索引擎优化&am…...

编程日记 2024/8/18 19:24:25

Unity引擎加密方案解析

据悉&#xff0c;Unity引擎的全球市场占有率已经超过50%&#xff0c;而在全球排名前1000的手游当中&#xff0c;这一数据更是高达73%。不止如此&#xff0c;Unity在中国拥有高达350万的注册用户&#xff0c;《崩坏星穹铁道》、《王者荣耀》等爆款游戏均为Unity引擎开发。 庞大…...

编程日记 2024/8/18 19:21:21

遇到的几个iOS问题

1 unable to boot the simulator 跑模拟器的时候遇到这个报错&#xff0c; 解决方法 处理办法&#xff1a; 删除升级之前的模拟器缓存&#xff0c;重启模拟器。删除路径&#xff1a;~/Library/Developer/CoreSimulator/Cache 注意&#xff1a;后面可能还会复现这个报错&#x…...

编程日记 2024/8/18 19:20:21

掌握ChatGPT写作艺术：从入门到精通的四个层次

这些周末我仔细研究了如何通过优化提示词提升ChatGPT输出内容的质量。 关于如何使用ChatGPT辅助我们的写作&#xff0c;我归纳了以下规律&#xff0c;希望能为你带来启发。 一、写作步骤 撰写一篇文章&#xff0c;思路上必须是从抽象到具体逐步深入。 首先我们需要明确写什么…...

编程日记 2024/8/18 19:19:19

虚幻UE5安装报错误代码：SU-PQR5

找到图标的快捷方式 “Epic Games Launcher”右键属性&#xff0c;在目标最后添加-SkipBuildPatchPrereq&#xff0c;如下图&#xff1a; 最后&#xff0c;见证奇迹成功打开软件&#xff0c;可以继续安装啦。 参考资料&#xff1a; 【图片】求教各位大佬--错误代码SU-PQR5【ep…...

编程日记 2024/8/18 19:18:15

谷歌开源Gemma-2 百亿参数大模型，性能超越Llama-3模型，免费使用

Gemma 模型 Gemma模型是谷歌发布的一个开源模型&#xff0c;任何人都可以免费下载预训练模型&#xff0c;进行使用。而谷歌最近也发布了Gemma 2 模型&#xff0c;模型参数超过了 200 亿大官&#xff0c;果真大模型最后都是拼参数的时候吗。 Gemma 2 模型发布 Gemma 2 模型可以…...

编程日记 2024/8/18 19:17:14

人工智能与机器学习原理精解【12】

文章目录 分级聚类理论分级聚类的详细说明1. 定义2. 算法3. 计算4. 例子5. 例题 皮尔逊相关系数 julia实现 参考文献 分级聚类 理论 分级聚类的详细说明 1. 定义 分级聚类&#xff08;Hierarchical Clustering&#xff09;&#xff0c;又称为层次聚类&#xff0c;是一种通过…...

编程日记 2024/8/18 19:11:08

openEuler系统安装Visual Studio Code

openEuler系统安装Visual Studio Code 背景安装密钥和存储库更新包缓存并使用dnf安装包Fedora 22及以上版本旧版本使用yum 安装过程截图安装成功看桌面效果 背景 openEuler(openEuler-24.03-LTS)安装了麒麟UKUI桌面但是没有麒麟软件商店想安装Visual Studio Code 安装密钥和…...

编程日记 2024/8/18 19:07:02

Qt 系统相关 - 事件

目录 1. 事件介绍 2. 事件的处理 示例1&#xff1a;处理鼠标进入和离开 示例2&#xff1a;当鼠标点击时&#xff0c;获取对应的坐标值&#xff1b; 3. 按键事件 3.1 单个按键 3.2 组合按键 4. 鼠标事件 4.1 鼠标单击事件 4.2 鼠标释放事件 4.3 鼠标双击事件 4.4 鼠标…...

编程日记 2024/8/18 19:03:59

Ubuntu最小化命令行系统 安装GUI 远程桌面

Ubuntu 服务器 安装GUI 更新、升级 sudo apt update && sudo apt upgrade安装桌面环境 sudo apt install taskselsudo apt install ubuntu-desktop安装显示登录管理器 sudo apt install lightdm安装 lightdm 时系统会让选择默认的显示管理器&#xff0c;选择lightd…...

编程日记 2024/8/18 19:00:55

Web前端：CSS篇（二）背景，文本，链接

CSS 背景 背景颜色 background-color 属性定义了元素的背景颜色. 页面的背景颜色使用在body的选择器中: body {background-color:#b0c4de;} CSS中&#xff0c;颜色值通常以以下方式定义: 十六进制 - 如&#xff1a;"#ff0000"RGB - 如&#xff1a;"rgb(255,0…...

编程日记 2024/8/18 18:58:53

ubuntu 24.04 软件源配置，替换为国内源

ubuntu 默认的官网源下载速度非常慢&#xff0c;新装 ubuntu 系统首先把 apt 软件源替换成国内源。 1、使用软件和更新设置国内源 打开软件和更新&#xff0c;选择位于中国的服务器&#xff1a; 外链图片转存失败&#xff0c;源站可能有防盗链机制&#xff0c;建议将图片保存…...

编程日记 2024/8/18 18:56:49

【Java 并发编程】(三) 从CPU缓存开始聊 volatile 底层原理

并发编程 三大问题 在并发编程中&#xff0c;原子性、有序性和可见性是三个重要的问题&#xff0c;解决这三个问题是保证多线程程序正确性的基础。原子性: 指的是一个操作不可分割, 要么全部执行完成, 要么不执行, 不存在执行一部分的情况.有序性: 有序性是指程序的执行顺序与…...

编程日记 2024/8/18 18:50:43

YOLOV8网络结构|搞懂Backbone-Conv

参数量计算： (输入通道*w)*(输出通道*w)*k^2+(输出通道*w)*2 w是模型缩放里面的width - [-1, 1, Conv, [64, 3, 2]] # 0-P1/2 输出通道c2=64,k=3,s=2 P1/2 特征图变小一半 先定义算子层 再搭一个forward前向传播 class Conv(nn.Module):"""Standard convo…...

编程日记 2024/8/18 18:49:42

Elasticsearch Nested类型详解与实战

Elasticsearch&#xff08;简称ES&#xff09;是一个基于Lucene的全文搜索引擎&#xff0c;它提供了强大的搜索能力以及对数据的高效索引和查询。在ES中&#xff0c;数据通常以JSON格式存储&#xff0c;并且可以采用多种数据类型。其中&#xff0c;nested类型是一种特殊的对象数…...

编程日记 2024/8/18 18:48:40

网络编程，网络协议，UDP协议

网络&#xff1a; 1.协议&#xff1a;通信双方约定的一套标准 2.国际网络通信协议标准&#xff1a; 1.OSI协议&#xff1a; 应用层 发送的数据内容 表示层 数据是否加密 会话层 是否建立会话连接 传输层 …...

编程日记 2024/8/18 18:46:37

每日一题——第六十三题

题目&#xff1a;判断一个数是否为合数 #include <stdio.h> #include <stdbool.h> // 为了使用bool类型 // 函数声明&#xff0c;用于判断是否为合数 bool isComposite(int x); int main() { int x; printf("请输入一个正整数: "); scanf(&quo…...

编程日记 2024/8/18 18:45:37

人工智能算法，图像识别技术；基于大语言模型的跨境商品识别与问答系统；图像识别

目录 一 .研究背景 二,大语言模型介绍 三,数据采集与预处理 商品识别算法 四. 跨境商品问答系统设计 五.需要源码联系 一 .研究背景 在当今全球化的背景下&#xff0c;跨境电商行业迅速发展&#xff0c;为消费者提供了更广泛的购物选择和更便利的购物方式。然而&#xf…...

编程日记 2024/8/18 18:42:33

数据库系统 第18节 数据库安全

数据库安全是确保数据库管理系统&#xff08;DBMS&#xff09;中存储的数据的保密性、完整性和可用性的过程。以下是一些关键的数据库安全措施&#xff1a; 用户身份验证&#xff08;Authentication&#xff09;&#xff1a; 这是确定用户或系统是否有权访问数据库的第一步。通…...

编程日记 2024/8/18 18:41:31

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/12/12 9:42:53

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/12/10 6:19:31

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/12/8 8:43:55

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/12/7 11:23:55

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2025/12/12 13:14:21

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2025/12/14 3:26:26