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

2020-05-17 06:27:43易采站长站整理

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;
};