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

更新时间：2020年07月20日 12:03:50 作者：suwu150

这篇文章主要介绍了JavaScript如何实现监听键盘输入和鼠标监点击，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

KeyboardEvent

KeyboardEvent 对象描述了键盘的交互方式。每个事件都描述了一个按键（Each event describes a key）；事件类型keydown， keypress 与 keyup 可以确定是哪种事件在活动。
KeyboardEvent 表示刚刚发生在按键上的事情。当你需要处理文本输入的时候，使用 HTML5 input 事件代替。例如，用户使用手持系统如平板电脑输入时，按键事件可能不会触发。

方法

本接口同样会继承对象父代的方法， 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.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 ? `${result} + ${e.key}` : `${result}`;
   } else {
    combineKey.innerHTML = '-';
   }
   };
  }
 </script>
</head>
<body>
<div id="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>

显示结果如下:

在这里插入图片描述

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

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

MouseEvent

从上面我们了解到了键盘事件的监听,在这里我们继续学习鼠标事件的监听:
MouseEvent 接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：click，dblclick，mouseup，mousedown。

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

MouseEvent.altKey 只读,当鼠标事件触发的时，如果alt 键被按下，返回true;
MouseEvent.button 只读,当鼠标事件触发的时，如果鼠标按钮被按下（如果有的话），将会返回一个数值。这些数值代表的意义分别是,button=0（鼠标左键），button=2（鼠标右键），button=1（鼠标中间键）
MouseEvent.buttons 只读,当鼠标事件触发的时，如果多个鼠标按钮被按下（如果有的话），将会返回一个或者多个代表鼠标按钮的数字。这些数值代表的意义分别是,buttons=1（鼠标左键），buttons=2（鼠标右键），buttons=3（同时按下左健和右键）,buttons=4（鼠标中间键）,buttons=5（同时按下左健和中间键）,buttons=6（同时按下中间健和右键）,buttons=7（同时按下左健、右键和中间键）.
MouseEvent.clientX 只读,鼠标指针在点击元素（DOM）中的X坐标。
MouseEvent.clientY 只读,鼠标指针在点击元素（DOM）中的Y坐标。
MouseEvent.ctrlKey 只读,当鼠标事件触发时，如果 control 键被按下，则返回 true；
MouseEvent.metaKey 只读,当鼠标事件触发时，如果 meta键被按下，则返回 true；
MouseEvent.shiftKey 只读当鼠标事件触发时，如果 shift 键被按下，则返回 true；
MouseEvent.which 只读,当鼠标事件触发时，表示被按下的按钮

同样的,我们使用代码进行获取鼠标点击时触发的值

<!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>

效果如下:

在这里插入图片描述

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

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	/?	191
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键盘鼠标监听功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS数组的常见用法实例
这篇文章主要介绍了JS数组的常见用法,实例分析了javascript针对数组的遍历、排序与字符串分割成数组等用法,非常具有实用价值,需要的朋友可以参考下
2015-02-02
JavaScript基于对象去除数组重复项的方法
这篇文章主要介绍了JavaScript基于对象去除数组重复项的方法,结合实例形式分析了javascript数组去重的操作步骤与具体实现技巧,需要的朋友可以参考下
2016-10-10
vue2.0获取自定义属性的值
这篇文章主要为大家详细介绍了vue2.0如何获取自定义属性的值，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
JS获取多维数组中相同键的值实现方法示例
这篇文章主要介绍了JS获取多维数组中相同键的值实现方法,结合实例形式分析了JS数组遍历、判断、键值获取等操作技巧,需要的朋友可以参考下
2017-01-01
微信小程序跳转外部链接的详细实现方法
写这个是因为最近小程序的一个需求需要从小程序跳转到客户的官网,或者其他外部报名链接,下面这篇文章主要给大家介绍了关于微信小程序跳转外部链接的详细实现方法,需要的朋友可以参考下
2022-10-10
Bootstrap和Java分页实例第一篇
这篇文章主要为大家详细介绍了Bootstrap和Java分页实例第一篇，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
表现、结构、行为分离的选项卡效果
2008-01-01
js中位运算的运用实例分析
这篇文章主要介绍了js中位运算的运用实例分析,需要的朋友可以参考下
2018-12-12
CSS3 动画卡顿性能优化的完美解决方案
今天小编就为大家分享一篇关于css3 动画卡顿性能优化的完美解决方案，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2018-09-09
JS 两日期相减,获得天数的小例子(兼容IE,FF)
这篇文章介绍了两日期相减,获得天数的小例子，有需要的朋友可以参考一下
2013-07-07

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具