基于 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按钮的各种类型组合,每种组合下又分别按照按键码存储一个自定义事件类型字符串,事件发生之后会从这里返回这个字符串,当然,没有对应自定义事件的时候,就老老实实地返回空字符串。
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
是一个私有方法,用来写入自定义键盘事件的方法:
_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[code] = config.type; } else if(ctrlalt) { this.keytypeset.ctrlalt[code] = config.type; } else if(ctrlshift) { this.keytypeset.ctrlshift[code] = config.type; } else if(altshift) { this.keytypeset.altshift[code] = config.type; } else if(altkey) { this.keytypeset.altkey[code] = config.type; } else if(ctrlkey) { this.keytypeset.ctrlkey[code] = config.type; } else if(shiftkey) { this.keytypeset.shiftkey[code] = config.type; } else { this.keytypeset.singlekey[code] = config.type; } return null; };
这样,一个键盘事件监听控件就大功告成了,下面是完整实现代码:
/** * @constructor 键盘事件监听器 * */ function keyboardlistener(param){ this._init(param); } !function(){ /** * @private {string} param.ele 事件对象选择器 * */ keyboardlistener.prototype._init = function _init(param){ this.$ele = $(param.ele); this._initevents(); this._initeventtype(); return null; }; /** * @private _emptyeventhandler 空白事件响应 * */ keyboardlistener.prototype._emptyeventhandler = function _emptyeventhandler(){ return null; }; /** * @private _initeventtype 初始化所有初始自定义事件类型 * */ keyboardlistener.prototype._initeventtype = function _initeventtype(){ var alltype = ['up', 'down', 'left', 'right', 'undo', 'redo', 'zoomin', 'zoomout', 'delete']; var intlen = alltype.length; this.alleventtype = alltype; this.callback = {}; this.eventdiscibeset = {}; for(var intcnt = 0; intcnt < intlen; intcnt++){ this.callback['on' + alltype[intcnt]] = keyboardlistener.prototype._emptyeventhandler; } return null; }; /** * @private _initevents 绑定 dom 事件 * */ keyboardlistener.prototype._initevents = function _initevents(){ 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[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 }; /** * @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 + ''; if(threekey){ this.keytypeset.threekey[code] = config.type; } else if(ctrlalt) { this.keytypeset.ctrlalt[code] = config.type; } else if(ctrlshift) { this.keytypeset.ctrlshift[code] = config.type; } else if(altshift) { this.keytypeset.altshift[code] = config.type; } else if(altkey) { this.keytypeset.altkey[code] = config.type; } else if(ctrlkey) { this.keytypeset.ctrlkey[code] = config.type; } else if(shiftkey) { this.keytypeset.shiftkey[code] = config.type; } else { this.keytypeset.singlekey[code] = config.type; } 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; }; }();
总结
以上所述是小编给大家介绍的基于 jquery 实现键盘事件监听控件,希望对大家有所帮助
上一篇: 搞快点