JS中的鼠标事件和键盘事件基础

文章目录

  • 一、鼠标事件
  • 二、键盘事件

鼠标事件和键盘事件在一些自定义组件时会得到使用,其实触发频率很高,但是往往被忽略

一、鼠标事件

// 鼠标事件 click => 单击; dblclick => 双击; mousedown => 鼠标按下; mousemove => 鼠标移动
const clickHandler = (event) => {// 鼠标事件对象const eventObj = {type: event.type, // 事件类型target: event.target, // 事件目标, 点击的元素,一般是深层元素,再冒泡外传// 鼠标相对于元素的位置,最近的一个定位祖先元素;如position: "relative"offsetX: event.offsetX, offsetY: event.offsetY,clientX: event.clientX, // 鼠标相对于浏览器窗口的位置,根页面clientY: event.clientY,screenX: event.screenX, // 鼠标相对于屏幕的位置(可以把浏览器缩小测试)screenY: event.screenY,x: event.x, // x 等同于 clientXy: event.y};console.log("click", event);
};
const mousemoveHandler = () => {console.log("mousemove");
};
const mousedownHandler = () => {console.log("mousedown");
};
// 双击事件 注意点击一定会触发,条件合适的同时才会触发双击,而且双击事件会在单击事件之后触发
const dblclickHandler = () => {console.log("dblclick");
};
window.addEventListener("click", clickHandler);
window.addEventListener("dblclick", dblclickHandler);
window.addEventListener("mousedown", mousedownHandler);
window.addEventListener("mousemove", mousemoveHandler);// 注意页面销毁时清除监听器;注意销毁的时候传入同一个函数(函数是有内存地址的,相当于变量)
// window.removeEventListener("click", clickHandler);

二、键盘事件

// eventObj 键盘事件对象
const KeyboardEventObj = {ctrlKey: true, // 是否按下了 ctrl 键altKey: true, // 是否按下了 alt 键shiftKey: true, // 是否按下了 shift 键metaKey: true, // 是否按下了 meta 键keyCode: 65, // 按下的键的编码, 数字code: "KeyA", // 按下的键的字符的名字,内部定义的key: "a", // 区分大小写,实际输出到字符repeat: false, // 是否重复按下, keypress中会持续触发bubbles: true // 是否冒泡,冒泡导致的事件
};// 键盘事件 keydown => 按下键盘; keypress => 按下键盘,keyup => 松开键盘
const keydownHandler = (e) => {// key 键盘按键的字符,code 键盘按键的编码console.log(e.key, e);
};
// 鼠标按住,会不断触发
const keypressHandler = (e) => {console.log(e.key, e);
};
const keyupHandler = (e) => {console.log(e.key, e);
};
window.addEventListener("keydown", keydownHandler);
window.addEventListener("keypress", keypressHandler);
window.addEventListener("keyup", keyupHandler);// 注意页面销毁时清除监听器
// window.removeEventListener("keydown", keydownHandler);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/498842.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

XQR5VFX130-1CN1752V,,具有高度的可编程性和灵活性的FPGA中文技术资料

XQR5VFX130-1CN1752V概述 : 高性能空间级Virtex-5QV FPGA将无与伦比的密度、性能和抗辐射能力与可重新配置的灵活性结合在一起,而无需承担 ASIC 的高风险。 丰富的系列级块:可满足各种高级逻辑设计和许多专用系统级块的需求。包括功能强大的3…

HTML——16.相对路径

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title></head><body><a href"../../fj1/fj2/c.html" target"_blank">链接到c</a><!--相对路径&#xff1a;-->…

Typescript 【详解】类型声明

值类型 // 字符串 let myNname: string "朝阳";// 数字 let num: number 10;// 布尔类型 let ifLogin: boolean true; // 布尔类型支持赋值计算之后结果是布尔值的表达式 let bool: boolean !!0// null let n: null null;// undefined let u: undefined undefi…

区块链安全常见的攻击分析——Unprotected callback - ERC721 SafeMint reentrancy【8】

区块链安全常见的攻击分析——Unprotected callback - ERC721 SafeMint reentrancy【8】 1.1 漏洞分析1.2 漏洞合约1.3 攻击分析1.4 攻击合约 重点&#xff1a;MaxMint721 漏洞合约的 mint 函数调用了 ERC721 合约中的 _checkOnERC721Received 函数&#xff0c;触发 to 地址中实…

写在2024的最后一天

落笔不知何起&#xff0c;那就从开始道来吧。 2024的元旦节后入职了一家新公司&#xff0c;一开始是比较向往的&#xff0c;也许是因为它座落在繁华街道的高档写字楼之中&#xff0c;又或许是因为它相较于以往的公司而言相对正规些。但接触了公司代码后&#xff0c;我有了…

自动化测试-Pytest测试

目录 pytest简介 基本测试实例 编写测试文件 执行测试 pytest运行时参数 mark标记 Fixture pytest插件 Allure测试报告 测试步骤 pytest简介 Pytest‌是一个非常流行的Python测试框架&#xff0c;它支持简单的单元测试和复杂的功能测试&#xff0c;具有易于上手、功…

CPT203 Software Engineering 软件工程 Pt.2 敏捷方法和需求工程(中英双语)

文章目录 3. Aglie methods&#xff08;敏捷方法&#xff09;3.1 Aglie methods&#xff08;敏捷方法&#xff09;3.1.1 特点3.1.2 优点3.1.3 缺点3.1.4 原则3.1.5 计划驱动与敏捷方法的对比 3.2 Scrum3.2.1 Scrum roles3.2.2 Scrum Activities and Artifacts3.2.2.1 Product B…

C#Halcon图像处理畸变校正之曲面校正

图像校正场景一般有两种&#xff0c;其一由镜头本身或安装角度引起&#xff0c;其二是被拍摄物品本身引起 理论处理流程 我的处理处理流程 1&#xff0c;加载网格校正图像 2&#xff0c;确定符合条件的网格区域 3&#xff0c;显示网格鞍点 4&#xff0c;显示网格线 5&#xff…

IO Virtualization with Virtio.part 1 [十二]

久等了各位&#xff01; 本篇开始讲解 IO 虚拟化中的 virtio&#xff0c;我会以 Linux 的 IIC 驱动为例&#xff0c;从 IIC 驱动的非虚拟化实现&#xff0c;到 IIC 驱动的半虚拟化实现&#xff0c;再到最后 X-Hyper 中如何通过 virtio 来实现前后端联系&#xff0c;一步步把 v…

HTML——26.像素单位

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>像素</title></head><body><!--像素&#xff1a;1.指设备屏幕上的一个点&#xff0c;单位px&#xff0c;如led屏上的小灯朱2.当屏幕分辨率固定时&…

uniapp不能直接修改props的数据原理浅析

uniapp不能直接修改props的数据 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the props value. Prop being mutated: "expectDeliveryAt" 避…

基于FISCO BCOS的电子签署系统

概述 本项目致力于构建一个安全、高效且功能完备的电子签署系统&#xff0c;通过整合区块链技术与传统数据库管理&#xff0c;为用户提供了可靠的电子签署解决方案&#xff0c;有效应对传统电子签署系统的数据安全隐患&#xff0c;满足企业和个人在数字化办公环境下对电子文档…

HackMyVM-Adria靶机的测试报告

目录 一、测试环境 1、系统环境 2、使用工具/软件 二、测试目的 三、操作过程 1、信息搜集 2、Getshell 3、提权 四、结论 一、测试环境 1、系统环境 渗透机&#xff1a;kali2021.1(192.168.101.127) 靶 机&#xff1a;debian/linux(192.168.101.226) 注意事项&…

STM32-笔记23-超声波传感器HC-SR04

一、简介 HC-SR04 工作参数&#xff1a; • 探测距离&#xff1a;2~600cm • 探测精度&#xff1a;0.1cm1% • 感应角度&#xff1a;<15 • 输出方式&#xff1a;GPIO • 工作电压&#xff1a;DC 3~5.5V • 工作电流&#xff1a;5.3mA • 工作温度&#xff1a;-40~85℃ 怎么…

win32汇编环境下,对话框程序中生成listview列表控件,点击标题栏自动排序的示例

;;启动后的效果 ;点击性别后的效果 ;把代码抄进radasm里面&#xff0c;可以直接编译运行。重要的地方加了备注。 ;这个有点复杂&#xff0c;重要的地方加了备注 ;以下是ASM文件 ;>>>>>>>>>>>>>>>>>>>>>>>…

工业以太网交换机怎么挑选?

在现代工业中&#xff0c;工业以太网交换机是网络的核心设备。正确选择适合的交换机&#xff0c;直接关系到工业网络的运行稳定性和系统的可靠性。接下来&#xff0c;我们将围绕选型时需要重点考虑的几个方面展开讨论&#xff0c;并为您提供一些实用建议。 性能与传输速度 选择…

如何在 Ubuntu 22.04 上安装并开始使用 RabbitMQ

简介 消息代理是中间应用程序&#xff0c;在不同服务之间提供可靠和稳定的通信方面发挥着关键作用。它们可以将传入的请求存储在队列中&#xff0c;并逐个提供给接收服务。通过以这种方式解耦服务&#xff0c;你可以使其更具可扩展性和性能。 RabbitMQ 是一种流行的开源消息代…

Zabbix企业级分布式监控系统

第一章&#xff1a;监控概念及Zabbix部署 监控概述 对于监控系统在企业架构中不是新的技术&#xff0c;但却是必不可少的重要组成部分&#xff0c;所谓无监控&#xff0c;不运维&#xff01; 监控系统可以帮助运维、开发、测试等人员及时的发现服务器出现的故障&#xff0c;…

前端安全措施:接口签名、RSA加密、反调试、反反调试、CAPTCHA验证

文章目录 引言I 设置防爬虫功能使用robots.txt文件通过配置HTTP头部中的X-Robots-TagII 禁止打开开发者工具反复清空控制台无限debugger反调试检查是否按下了F12或其他调试快捷键禁用右键监听调试快捷键例子III 屏蔽粘贴/复制/剪切/选中IV 知识扩展: javascript内置命令调试分…

ThinkPHP 8高效构建Web应用-第一个简单的MVC应用示例

【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 使用VS Code开发ThinkPHP项目-CSDN博客 我们先实现一…