最近项目里要做一个画板，需要对键盘事件进行监听，来进行诸如撤回、重做、移动、缩放等快捷键操作，因此顺手实现了一个键盘事件监听控件，略有收获，整理出来，希望对大家有所帮助，更希望能获得高手的指点。
1. 自动获取焦点
似乎浏览器的键盘事件只能被那些可以获得焦点的元素设置监听，而通常需要监听事件的 <DIV>、<CANVAS> 元素都不能获得焦点，因此需要修改目标元素的某些属性使其可以获得焦点，另外一种可行的方法是将事件委托给诸如 <INPUT> 标签。这里采用的是第一类方法，当然，可以修改的属性也不止一种，例如，对于 <DIV> 标签可以将其 “editable” 属性设为 true，而这里采用的是给其设一个 tabindex 值。代码如下：
$ele.attr('tabindex', 1); 另外，焦点事件的触发需要点击元素或者 TAB 切换，而这并不符合人类的直觉，因此需要监听鼠标移入事件，使目标元素“自动”地获得焦点：
$ele.on('mouseenter', $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;
} else if(ctrlAlt) {
resStr = keyTypeSet.ctrlAlt;
} else if(ctrlShift) {
resStr = keyTypeSet.ctrlShift;
} else if(altShift) {
resStr = keyTypeSet.altShift;
} else if(altKey) {
resStr = keyTypeSet.altKey;
} else if(ctrlKey) {
resStr = keyTypeSet.ctrlKey;
} else if(shiftKey) {
resStr = keyTypeSet.shiftKey;
} else {
resStr = keyTypeSet.singleKey;
}return resStr
};
这里的 keyTypeSet 是一个类似于查找表的对象，里面存储了 ctrl、shift、alt按钮的各种类型组合，每种组合下又分别按照按键码存储一个自定义事件类型字符串，事件发生之后会从这里返回这个字符串，当然，没有对应自定义事件的时候，就老老实实地返回空字符串。
4. 事件分发
_keyCodeProcess 方法从事件中提取出了事件类型，我们提前将监听的回调函数存储在一个查找表 callback 中，并且“巧妙”地使得其键名刚好为自定义事件字符串前面加个“on”前缀，就可以方便地调用了，前述 _keyDownHandler 正是为此而设计的：
function _keyDownHandler(e){ var strCommand = this._keyCodeProcess(e); var objEvent = { type: '', originEvent: e.originEvent }; strCommand && this.callback['on' + strCommand](objEvent); return null; };5. 事件订阅与解除订阅
前面说了，我们是把回调函数存储起来适时调用的，因此需要对外暴露一个“订阅”接口，让开发者可以方便地把自己的回调函数存储到对象实例中去，为此，我定义了一个 .bind接口：
function bind(type, callback, description){ var allType = this.allEventType; if(allType.indexOf(type) === -1){ throwError('不支持的事件类型，请先扩展该类型，或采用其他事件类型'); } if(!(callback instanceof Function)){ throwError('绑定的事件处理回调必须是函数类型'); } this.callback['on' + type] = callback; this.eventDiscibeSet[type] = description || '没有该事件的描述'; return this; };由于是给人用的，所以顺带做了下类型检查。
根据接口的“对称性”，有订阅最好也有解除订阅，因此定义了 .unbind接口，只有一句代码，实现如下：function unbind(type){ this.callback['on' + type] = this._emptyEventHandler; return this; };6.扩展自定义事件类型
键盘事件的组合丰富多彩，如果全部内置在控件中的话，会是很臃肿的，因此除了少数几个常见的组合键之外，开发者可以通过 .extendEventType 方法，来自定义组合键和返回的字符串：
function extendEventType(config){ var len = 0; if(config instanceof Array){ len = config.length; while(len--){ this._setKeyComposition(config[len]); } } else { this._setKeyComposition(config); } return this; };其中的 ._setKeyComposition 是一个私有方法，用来写入自定义键盘事件：
function _setKeyComposition(config){ var altKey = config.alt; var ctrlKey = config.ctrl; var shiftKey = config.shift; var threeKey = altKey && ctrlKey && shiftKey; var ctrlAlt = altKey && ctrlKey; var altShift = altKey && shiftKey; var ctrlShift = shiftKey && ctrlKey; var code = config.code + ''; if(threeKey){ this.keyTypeSet.threeKey= config.type;
} else if(ctrlAlt) {
this.keyTypeSet.ctrlAlt= config.type;
} else if(ctrlShift) {
this.keyTypeSet.ctrlShift= config.type;
} else if(altShift) {
this.keyTypeSet.altShift= config.type;
} else if(altKey) {
this.keyTypeSet.altKey= config.type;
} else if(ctrlKey) {
this.keyTypeSet.ctrlKey= config.type;
} else if(shiftKey) {
this.keyTypeSet.shiftKey= config.type;
} else {
this.keyTypeSet.singleKey= config.type;
}this.allEventType.push(type);
this.callback['on' + type] = this._emptyEventHandler;return null;
};
这样，一个键盘事件监听控件就大功告成了，下面是完整实现代码：
/** * @constructor 键盘事件监听器 * */ function KeyboardListener(param){ this._init(param); } !function(){ 'use strict'; /** * @private {String} param.ele 事件对象选择器 * */ KeyboardListener.prototype._init = function _init(param){ this.$ele = $(param.ele); this._initEvents(); return null; }; /** * @private _emptyEventHandler 空白事件响应 * */ KeyboardListener.prototype._emptyEventHandler = function _emptyEventHandler(){ return null; }; /** * @private _initEvents 绑定 DOM 事件 * */ KeyboardListener.prototype._initEvents = function _initEvents(){ this.allEventType = []; this.callback = {}; this.eventDiscibeSet = {}; var $ele = this.$ele; $ele.attr('tabindex', 1); $ele.on('mouseenter', function(){ $ele.focus(); }); $ele.on('keydown', this._keyDownHandler.bind(this)); this.keyTypeSet = { altKey: {}, ctrlAlt: {}, ctrlKey: {}, threeKey: {}, altShift: {}, shiftKey: {}, ctrlShift: {}, singleKey: {} }; // 支持一些内建的键盘事件类型 this.extendEventType([ { type: 'redo', ctrl: true, shift: true, code: 90 }, { type: 'undo', ctrl: true, code: 90 }, { type: 'copy', ctrl: true, code: 67 }, { type: 'paste', ctrl: true, code: 86 }, { type: 'delete', code: 46 }, { type: 'right', code: 39 }, { type: 'down', code: 40 }, { type: 'left', code: 37 }, { type: 'up', code: 38 } ]); return null; }; /** * @private _keyDownHandler 自定义键盘事件分发 * */ KeyboardListener.prototype._keyDownHandler = function _keyDownHandler(e){ var strCommand = this._keyCodeProcess(e); var objEvent = { type: '', originEvent: e.originEvent }; strCommand && this.callback['on' + strCommand](objEvent); return null; }; /** * @private _keyCodeProcess 处理按键码 * */ KeyboardListener.prototype._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;
} else if(ctrlAlt) {
resStr = keyTypeSet.ctrlAlt;
} else if(ctrlShift) {
resStr = keyTypeSet.ctrlShift;
} else if(altShift) {
resStr = keyTypeSet.altShift;
} else if(altKey) {
resStr = keyTypeSet.altKey;
} else if(ctrlKey) {
resStr = keyTypeSet.ctrlKey;
} else if(shiftKey) {
resStr = keyTypeSet.shiftKey;
} else {
resStr = keyTypeSet.singleKey;
}return resStr
};/**
* @private _setKeyComposition 自定义键盘事件
* @param {Object} config 键盘事件配置方案
* @param {String} config.type 自定义事件类型
* @param {keyCode} config.code 按键的码值
* @param {Boolean} [config.ctrl] 是否与 Ctrl 形成组合键
* @param {Boolean} [config.alt] 是否与 Alt 形成组合键
* @param {Boolean} [config.shift] 是否与 Shift 形成组合键
* */
KeyboardListener.prototype._setKeyComposition = function _setKeyComposition(config){
var altKey = config.alt;
var ctrlKey = config.ctrl;
var shiftKey = config.shift;var threeKey = altKey && ctrlKey && shiftKey;
var ctrlAlt = altKey && ctrlKey;
var altShift = altKey && shiftKey;
var ctrlShift = shiftKey && ctrlKey;
var code = config.code + '';
var type = config.type;if(threeKey){
this.keyTypeSet.threeKey= type;
} else if(ctrlAlt) {
this.keyTypeSet.ctrlAlt= type;
} else if(ctrlShift) {
this.keyTypeSet.ctrlShift= type;
} else if(altShift) {
this.keyTypeSet.altShift= type;
} else if(altKey) {
this.keyTypeSet.altKey= type;
} else if(ctrlKey) {
this.keyTypeSet.ctrlKey= type;
} else if(shiftKey) {
this.keyTypeSet.shiftKey= type;
} else {
this.keyTypeSet.singleKey= type;
}
this.allEventType.push(type);
this.callback['on' + type] = this._emptyEventHandler;
// this.eventDiscibeSet = {};return null;
};/**
* @method extendEventType 扩展键盘事件类型
* @param {Object|Array<object>} config 键盘事件配置方案
* @param {String} config.type 自定义事件类型
* @param {keyCode} config.code 按键的码值
* @param {Boolean} [config.ctrl] 是否与 Ctrl 形成组合键
* @param {Boolean} [config.alt] 是否与 Alt 形成组合键
* @param {Boolean} [config.shift] 是否与 Shift 形成组合键
* */
KeyboardListener.prototype.extendEventType = function extendEventType(config){
var len = 0;
if(config instanceof Array){
len = config.length;
while(len--){
this._setKeyComposition(config[len]);
}
} else {
this._setKeyComposition(config);
}
return this;
};/**
* @method bind 绑定自定义的键盘事件
* @param {String} type 事件类型 如：['up', 'down', 'left', 'right', 'undo', 'redo', 'delete', zoomIn, 'zoomOut']
* @param {Function} callback 回调函数，参数为一个自定义的仿事件对象
* @param {String} description 对绑定事件的用途进行说明
* */
KeyboardListener.prototype.bind = function bind(type, callback, description){
var allType = this.allEventType;
if(allType.indexOf(type) === -1){
throwError('不支持该事件类型，请先扩展该类型，或采用其他事件类型');
}if(!(callback instanceof Function)){
throwError('绑定的事件处理回调必须是函数类型');
}this.callback['on' + type] = callback;
this.eventDiscibeSet[type] = description || '没有该事件的描述';
return this;
};/**
* @method unbind 解除事件绑定
* @param {String} type 事件类型
* */
KeyboardListener.prototype.unbind = function unbind(type){
this.callback['on' + type] = this._emptyEventHandler;return this;
};return null;
}();
