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

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

news 2025/7/3 18:38:51

鼠标滚轮滚动事件：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

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/7/2 15:38:11

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/6/27 9:51:25

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/6/25 1:12:20

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

编程新知 2025/6/21 16:31:11

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

编程新知 2025/6/20 23:01:40

云原生周刊：k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...

编程新知 2025/6/21 8:26:09

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

编程新知 2025/7/1 17:21:18

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...

编程新知 2025/6/21 4:22:18

Matlab实现任意伪彩色图像可视化显示

Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像 在科研研究中&#xff0c;如何展示好看的实验结果图像非常重要&#xff01;&#xff01;&#xff01; 1、灰度原始图像 灰度图像每个像素点只有一个数值&#xff0c;代表该点的​​亮度&#xff08;或…...

编程新知 2025/7/2 3:36:28

boost::filesystem::path文件路径使用详解和示例

boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类&#xff0c;封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解&#xff0c;包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...

编程新知 2025/6/13 10:57:10