基于基于 jQuery 实现键盘事件监听控件实现键盘事件监听控件
主要介绍了基于 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 正是为此而设计