极乐门资源网

JavaScript如何实现监听键盘输入和鼠标监点击
网络编程 2024/11/16 佚名
2 0
极乐门资源网 Design By www.ioogu.com

实际应用中,我们会遇到监听按键输入和鼠标点击事件,在这里我们进行对鼠标和键盘事件的总结.

Keyboard"color: #ff0000">方法

本接口同样会继承对象父代的方法， UIEvent 和 Event。

  • KeyboardEvent.getModifierState()返回一个 Boolean，表示在事件创建时，修改键如Alt ， Shift， Ctrl， Meta等是否按下。
  • KeyboardEvent.initKeyEvent()初始化一个 KeyboardEvent 对象。 现在的标准方式是使用 KeyboardEvent() 构造器。
  • KeyboardEvent.initKeyboardEvent() 初始化一个 KeyboardEvent 对象。 现在的标准方式是使用 KeyboardEvent() 构造器。

介绍下我们常用的一些属性：

  • KeyboardEvent.key
  • KeyboardEvent.code
  • KeyboardEvent.ctrlKey
  • KeyboardEvent.shiftKey
  • KeyboardEvent.altKey
  • KeyboardEvent.metaKey

KeyboardEvent.ctrlKey | shiftKey | altKey | metaKey 比较简单，表示当你按下键盘的时候，Ctrl | Shift | Alt | meta 按键是否已经被按下。如果已经被按下这些值就是 true，通常我们要运用组合键的判断会用到（譬如：Alt + a）。大家看到 meta 会疑惑这个是哪个键？在 Mac 平台上指的是 command 键（"color: #ff0000">KeyboardEvent.key

如果你按下的按钮所代表的是一个可打印的字符（printed representation），那么这个 key 的值就是这个字符（譬如：a、Enter、Shift、CapsLock、Backspace）。。

KeyboardEvent.code

这个值比较诡异，它表示你按了键盘上的哪个按键。你按 a，code 的值是 KeyA，你按左边的 Shift，code 的值是 ShiftLeft。什么意思呢？就是他表示你按的按键在键盘的哪个位置。这里就有趣了，因为不同语言的键盘同一个键代表的字符可能不同，但是位置是相同的。打个比方：KeyQ 代表的是我们普通键盘q按键。但是呢 Dvorak 键盘q这个位置的按钮代表的不是 q，而是'。所以如果你按同一个按钮，key 的值可能不同，code 的值会相同。

KeyboardEvent.keyCode 只读

返回一个表示系统和实现相关的数字代码的 Number， 用于标识按键的未修改值。
了解了上面属性,我们就可以进行使用代码的方式实时获取输入的键值

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>键盘事件监听</title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }

  #container {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   padding-top: 20px;
  }

  table,
  table tr th,
  table tr td {
   border: 1px solid #000;
  }

  table {
   min-height: 25px;
   line-height: 25px;
   text-align: center;
   border-collapse: collapse;
   padding: 2px;
  }

  th {
   width: 150px;
  }
 </style>
 <script type="text/javascript" language=JavaScript>
  window.onload = function () {
   const key = document.getElementById('key');
   const keyCode = document.getElementById('keyCode');
   const code = document.getElementById('code');
   const ctrlKey = document.getElementById('ctrlKey');
   const metaKey = document.getElementById('metaKey');
   const shiftKey = document.getElementById('shiftKey');
   const altKey = document.getElementById('altKey');
   const combineKey = document.getElementById('combineKey');


   document.onkeydown = function(event) {
   var e = event || window.event || arguments.callee.caller.arguments[0];
   e.preventDefault(); //阻止默认事件
   // 设置获取的值
   key.innerHTML = e.key;
   keyCode.innerHTML = e.keyCode;
   code.innerHTML = e.code;
   ctrlKey.innerHTML = e.ctrlKey;
   metaKey.innerHTML = e.metaKey;
   shiftKey.innerHTML = e.shiftKey;
   altKey.innerHTML = e.altKey;

   if (e.altKey || e.shiftKey || e.metaKey || e.ctrlKey) {
    let result = '';
    if (e.altKey) {
    result = 'Alt';
    } else if (e.shiftKey) {
    result = 'Shift';
    } else if (e.metaKey) {
    result = 'Meta';
    } else if (e.ctrlKey) {
    result = 'Control';
    }
    combineKey.innerHTML = result !== e.key "container">
 <table border="0px">
  <tr>
   <th>key</th>
   <th>keyCode</th>
   <th>code</th>
   <th>ctrlKey</th>
   <th>metaKey</th>
   <th>shiftKey</th>
   <th>altKey</th>
   <th>组合健</th>
  </tr>
  <tr>
   <td id="key">-</td>
   <td id="keyCode">-</td>
   <td id="code">-</td>
   <td id="ctrlKey">-</td>
   <td id="metaKey">-</td>
   <td id="shiftKey">-</td>
   <td id="altKey">-</td>
   <td id="combineKey">-</td>
  </tr>
 </table>
 <hr />
</div>
</body>
</html>

显示结果如下:

JavaScript如何实现监听键盘输入和鼠标监点击

当我们在键盘上输入键值时,会有相应的属性显示,也可以点击该链接实时尝试:

See the Pen keyboardEvent by suwu150 (@suwu150) on CodePen.

Mouse"htmlcode"> 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>键盘事件监听</title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }

  #container {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   padding-top: 20px;
  }

  table,
  table tr th,
  table tr td {
   border: 1px solid #000;
  }

  table {
   min-height: 25px;
   line-height: 25px;
   text-align: center;
   border-collapse: collapse;
   padding: 2px;
  }

  th {
   width: 130px;
  }
 </style>
 <script type="text/javascript" language=JavaScript>
  function doNothing(){
  window.event.returnValue=false;
  return false;
  }

  window.onload = function () {
   const button = document.getElementById('button');
   const buttons = document.getElementById('buttons');
   const clientX = document.getElementById('clientX');
   const clientY = document.getElementById('clientY');
   const ctrlKey = document.getElementById('ctrlKey');
   const metaKey = document.getElementById('metaKey');
   const shiftKey = document.getElementById('shiftKey');
   const altKey = document.getElementById('altKey');
   const which = document.getElementById('which');
   const combineKey = document.getElementById('combineKey');


   document.onmousedown = function(event) {
   var e = event || window.event || arguments.callee.caller.arguments[0];
   e.preventDefault(); //阻止默认事件
   // 设置获取的值
   button.innerHTML = e.button;
   buttons.innerHTML = e.buttons;
   clientX.innerHTML = e.clientX;
   clientY.innerHTML = e.clientY;
   ctrlKey.innerHTML = e.ctrlKey;
   metaKey.innerHTML = e.metaKey;
   shiftKey.innerHTML = e.shiftKey;
   altKey.innerHTML = e.altKey;
   which.innerHTML = e.which;

   function getButton(value) {
    let buttonname = '';
    if (value === 0) buttonname = '鼠标左键';
    if (value === 1) buttonname = '鼠标中间键';
    if (value === 2) buttonname = '鼠标右键';
    return buttonname;
   }

   if (e.altKey || e.shiftKey || e.metaKey || e.ctrlKey) {
    let result = '';
    if (e.altKey) {
    result = 'Alt';
    } else if (e.shiftKey) {
    result = 'Shift';
    } else if (e.metaKey) {
    result = 'Meta';
    } else if (e.ctrlKey) {
    result = 'Control';
    }
    combineKey.innerHTML = `${result} + ${getButton(e.button)}`;
   } else {
    combineKey.innerHTML = getButton(e.button);
   }
   };
  }
 </script>
</head>
<body oncontextmenu="doNothing()">
<div id="container">
 <table border="0px">
  <tr>
   <th>button</th>
   <th>buttons</th>
   <th>clientX</th>
   <th>clientY</th>
   <th>ctrlKey</th>
   <th>metaKey</th>
   <th>shiftKey</th>
   <th>altKey</th>
   <th>which</th>
   <th>组合健</th>
  </tr>
  <tr>
   <td id="button">-</td>
   <td id="buttons">-</td>
   <td id="clientX">-</td>
   <td id="clientY">-</td>
   <td id="ctrlKey">-</td>
   <td id="metaKey">-</td>
   <td id="shiftKey">-</td>
   <td id="altKey">-</td>
   <td id="which">-</td>
   <td id="combineKey">-</td>
  </tr>
 </table>
 <hr />
</div>
</body>
</html>

效果如下:

JavaScript如何实现监听键盘输入和鼠标监点击

可参见以下链接进行操作:

See the Pen MouseEvent by suwu150 (@suwu150) on CodePen.

常见键值

字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76 U 85 3 51 D 68 M 77 V 86 4 52 E 69 N 78 W 87 5 53 F 70 O 79 X 88 6 54 G 71 P 80 Y 89 7 55 H 72 Q 81 Z 90 8 56 I 73 R 82 0 48 9 57 数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 0 96 8 104 F1 112 F7 118 1 97 9 105 F2 113 F8 119 2 98 * 106 F3 114 F9 120 3 99 + 107 F4 115 F10 121 4 100 Enter 108 F5 116 F11 122 5 101 - 109 F6 117 F12 123 6 102 . 110 7 103 / 111 控制键键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 BackSpace 8 Esc 27 Right Arrow 39 -_ 189 Tab 9 Spacebar 32 Dw Arrow 40 .> 190 Clear 12 Page Up 33 Insert 45 /"#ffffff"> Enter 13 Page Down 34 Delete 46 `~ 192 Shift 16 End 35 Num Lock 144 [{ 219 Control 17 Home 36 ;: 186 /| 220 Alt 18 Left Arrow 37 =+ 187 ]} 221 Cape Lock 20 Up Arrow 38 ,< 188 '" 222 多媒体键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 音量加 175 音量减 174 停止 179 静音 173 浏览器 172 邮件 180 搜索 170 收藏 171

参考链接:

1.https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent
2.https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/ctrlKey

标签：
JavaScript监听键盘,JavaScript监听鼠标
极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“JavaScript如何实现监听键盘输入和鼠标监点击”

暂无JavaScript如何实现监听键盘输入和鼠标监点击的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com