JS键盘事件处理指南：事件绑定、调度机制与键码获取方法

JavaScript键盘事件处理概述

最佳的处理方式通常是采用标准化的事件处理机制。


objEvtMap[ id+evt ]=function(evt,element)

事件绑定方法

接下来介绍如何绑定事件，确保按键动作能够被正确捕获。


function bindEvent_4_dataBlock()
{
var arr=$("#table1 li");
arr.each(function(index, element) {
$(element).keypress(function(){
alert('keypress');
});
var id="data_aid_"+index;
$(element).attr("id","data_aid_"+index);
objEvtMap[ id ]=function(evt,element)
{
if(evt=="down")
key_press_hadler($(element));
if(evt=="up")
key_press_hadler4up($(element));
if(evt=="left")
{};
if(evt=="rit")
{}
};
});
}

事件调度机制

在事件绑定的基础上，需要进一步实现事件的调度逻辑，以处理不同的按键响应。


document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
alert("keycode:"+e.keyCode);
if(e && e.keyCode==40 ){//下
//alert('40=下键，39=右键');
var now=$(".selected");
var id=$(now).attr("id");
var func=objEvtMap[id ];
func("down",now);
//key_press_hadler(now);
return false;
}

键盘事件获取与键码判断

在JavaScript中获取键盘事件是前端开发中的常见需求，主要涉及监听用户的按键输入。


<script type="text/javascript" language=JavaScript charset="UTF-">
document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[];
if(e && e.keyCode==){ // 按 Esc 
//要做的事情
}
if(e && e.keyCode==){ // 按 F 
//要做的事情
} 
if(e && e.keyCode==){ // enter 键
//要做的事情
}
}; 
</script>

只要定义了这些键的动作，在浏览器中按下这些键就会触发响应，该方案兼容目前所有主流浏览器。

JavaScript中的键盘事件应用广泛，因此整理了一份键盘事件对应的键码表供参考分享。


keyCode = BackSpace BackSpace
keyCode = Tab Tab
keyCode = Clear
keyCode = Enter
keyCode = Shift_L
keyCode = Control_L
keyCode = Alt_L
keyCode = Pause
keyCode = Caps_Lock
keyCode = Escape Escape
keyCode = space
keyCode = Prior
keyCode = Next
keyCode = End
keyCode = Home
keyCode = Left
keyCode = Up
keyCode = Right
keyCode = Down
keyCode = Select
keyCode = Print
keyCode = Execute
keyCode = Insert
keyCode = Delete
keyCode = Help
keyCode = equal braceright
keyCode = exclam onesuperior
keyCode = quotedbl twosuperior
keyCode = section threesuperior
keyCode = dollar
keyCode = percent
keyCode = ampersand
keyCode = slash braceleft
keyCode = parenleft bracketleft
keyCode = parenright bracketright
keyCode = a A
keyCode = b B
keyCode = c C
keyCode = d D
keyCode = e E EuroSign
keyCode = f F
keyCode = g G
keyCode = h H
keyCode = i I
keyCode = j J
keyCode = k K
keyCode = l L
keyCode = m M mu
keyCode = n N
keyCode = o O
keyCode = p P
keyCode = q Q at
keyCode = r R
keyCode = s S
keyCode = t T
keyCode = u U
keyCode = v V
keyCode = w W
keyCode = x X
keyCode = y Y
keyCode = z Z
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_Multiply KP_Multiply
keyCode = KP_Add KP_Add
keyCode = KP_Separator KP_Separator
keyCode = KP_Subtract KP_Subtract
keyCode = KP_Decimal KP_Decimal
keyCode = KP_Divide KP_Divide
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = Num_Lock
keyCode = Scroll_Lock
keyCode = acute grave
keyCode = comma semicolon
keyCode = minus underscore
keyCode = period colon
keyCode = numbersign apostrophe
keyCode = plusminus hyphen macron
keyCode =
keyCode = copyright registered
keyCode = guillemotleft guillemotright
keyCode = masculine ordfeminine
keyCode = ae AE
keyCode = cent yen
keyCode = questiondown exclamdown
keyCode = onequarter onehalf threequarters
keyCode = less greater bar
keyCode = plus asterisk asciitilde
keyCode = multiply division
keyCode = acircumflex Acircumflex
keyCode = ecircumflex Ecircumflex
keyCode = icircumflex Icircumflex
keyCode = ocircumflex Ocircumflex
keyCode = ucircumflex Ucircumflex
keyCode = ntilde Ntilde
keyCode = yacute Yacute
keyCode = oslash Ooblique
keyCode = aring Aring
keyCode = ccedilla Ccedilla
keyCode = thorn THORN
keyCode = eth ETH
keyCode = diaeresis cedilla currency
keyCode = agrave Agrave atilde Atilde
keyCode = egrave Egrave
keyCode = igrave Igrave
keyCode = ograve Ograve otilde Otilde
keyCode = ugrave Ugrave
keyCode = adiaeresis Adiaeresis
keyCode = ediaeresis Ediaeresis
keyCode = idiaeresis Idiaeresis
keyCode = odiaeresis Odiaeresis
keyCode = udiaeresis Udiaeresis
keyCode = ssharp question backslash
keyCode = asciicircum degree
keyCode = sterling
keyCode = Mode_switch

可以通过使用event对象的keyCode属性来判断用户输入的键值，这是获取按键信息的关键方法。

例如：if(event.keyCode==)alert(“enter!”);，这段代码展示了如何判断Enter键的按下。

为了便于开发，这里提供了一份完整的键值对应表，方便查阅不同按键对应的keyCode数值。


A　　X 　U 　　X
B　　X　 V　　 X
C　　X　 W　　 X
D　　X　 X 　　X
E　　X　 Y　　 X
F　　X　 Z　　 X
G　　X　 　　 X
H　　X　 　　 X
I　　X　 　　 X
J　　X　 　　X
K　　X　 　　X
L　　X　 　　X
M　　X　 　　 X
N　　X 　 　　X
O　　X 　 　　X
P　　X 　 　　X
Q　　X　ESC　　XB
R　　X　CTRL 　X
S　　X　SHIFT　X
T　　X　ENTER　XD

组合键处理技巧

如果要使用组合键，则可以判断是否同时按下了这几个键，比如ctrl键、shift键以及alt键的组合使用就可以判断是否多按下了ctrl键、shift键以及alt键。

JavaScript键盘事件处理：绑定、调度与键码获取详解

JavaScript键盘事件处理概述

事件绑定方法

事件调度机制

键盘事件获取与键码判断

组合键处理技巧

实用工具推荐