JavaScript键盘鼠标监听功能

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

Keyboard​Event

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.ctrlKey | shiftKey | altKey | metaKey 比较简单，表示当你按下键盘的时候，Ctrl | Shift | Alt | meta 按键是否已经被按下。如果已经被按下这些值就是 true，通常我们要运用组合键的判断会用到（譬如：Alt + a）。大家看到 meta 会疑惑这个是哪个键？在 Mac 平台上指的是 command 键（⌘），而在 Windows 平台指的是 windows 键（⊞）。但是不是所有 Windows 电脑键盘都有 ⊞ 这个键的。接下来我们介绍下最重要的两个属性 key 和 code。

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， 用于标识按键的未修改值。
了解了上面属性,我们就可以进行使用代码的方式实时获取输入的键值

    
    
    
    



    

        

            
key
            
keyCode
            
code
            
ctrlKey
            
metaKey
            
shiftKey
            
altKey
            
组合健
        
        

            
-
            
-
            
-
            
-
            
-
            
-
            
-
            
-
        
    
    

显示结果如下:

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

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

Mouse​Event​

从上面我们了解到了键盘事件的监听,在这里我们继续学习鼠标事件的监听:
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 只读,当鼠标事件触发时，表示被按下的按钮。

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

    
    
    
    



    

        

            
button
            
buttons
            
clientX
            
clientY
            
ctrlKey
            
metaKey
            
shiftKey
            
altKey
            
which
            
组合健
        
        

            
-
            
-
            
-
            
-
            
-
            
-
            
-
            
-
            
-
            
-
        
    
    

效果如下:

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

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