基于 jQuery 实现键盘事件监听控件

最近项目里要做一个画板，需要对键盘事件进行监听，来进行诸如撤回、重做、移动、缩放等操作，因此顺手实现了一个键盘事件监听控件，期间略有收获，整理出来，希望对大家有所帮助，更希望能获得高手的指点。

1. 自动获取焦点

似乎浏览器的键盘事件只能被那些可以获得焦点的元素设置监听，而通常需要监听事件的 <DIV>、<CANVAS> 元素都不能获得焦点，因此需要修改目标元素的某些属性使其可以获得焦点，另外一种可行的方法是将事件委托给诸如 <INPUT> 标签。这里采用的是第一类方法，当然，可以修改的属性也不止一种，例如，对于 <DIV> 标签可以将其 “editable” 属性设为 true，而这里采用的是给其设一个 tabindex 值。代码如下：

$ele.attr('tabindex', 1);

另外，焦点事件的触发需要点击元素或者 TAB 切换，而这并不符合人类的直觉，因此需要监听鼠标移入事件，使目标元素“自动”地获得焦点：

$ele.on('mouseenter', function(){  $ele.focus();});

2. 监听键盘事件

由于项目面向的客户所使用的浏览器以chrome为主(实际上是36x浏览器)，因此没有针对浏览器做任何适配，仅仅使用了 jQuery的事件监听：

$ele.on('keydown', this._keyDownHandler.bind(this));

由于实现是控件化的，所以定义了一个私有方法 _keyDownHandler 来响应键盘的动作。

3. 按键事件甄别

jQuery事件监听器返回的事件对象信息较多，因此需要进行甄别，为此定义了一个私有方法 _keyCodeProcess 来处理按键

function _keyCodeProcess(e){    var code = e.keyCode + '';    var altKey = e.altKey;    var ctrlKey = e.ctrlKey;    var shiftKey = e.shiftKey;    var threeKey = altKey && ctrlKey && shiftKey;    var ctrlAlt = altKey && ctrlKey;    var altShift = altKey && shiftKey;    var ctrlShift = shiftKey && ctrlKey;    var keyTypeSet = this.keyTypeSet;    var resStr = '';    if(threeKey){      resStr = keyTypeSet.threeKey[code];    } else if(ctrlAlt) {      resStr = keyTypeSet.ctrlAlt[code];    } else if(ctrlShift) {      resStr = keyTypeSet.ctrlShift[code];    } else if(altShift) {      resStr = keyTypeSet.altShift[code];    } else if(altKey) {      resStr = keyTypeSet.altKey[code];    } else if(ctrlKey) {      resStr = keyTypeSet.ctrlKey[code];    } else if(shiftKey) {      resStr = keyTypeSet.shiftKey[code];    } else {      resStr = keyTypeSet.singleKey[code];    }    return resStr  };

这里的 keyTypeSet 是一个类似于查找表的对象，里面存储了 ctrl、shift、alt按钮的各种类型组合，每种组合下又分别按照按键码存储一个自定义事件类型字符串，事件发生之后会从这里返回这个字符串，当然，没有对应自定义事件的时候，就老老实实地返回空字符串。