处理按键事件的js模块

处理按键事件的模块果然不同凡想啊，刚试了试淘宝页面上的左右键控制页面跳转的效果，很有感觉啊，不日即可完成全部效果，好嗨匹啊！

function Keymap(bindings){

this.map = {};

if (bindings)

{

for(name in bindings)

this.map[name.toLowerCase()] = bindings[name];

}

}

Keymap.prototype.bind = function(key,func){

this.map[key.toLowerCase()] = func;

};

Keymap.prototype.unbind = function(key){

delete this.map[key.toLowerCase()];

};

Keymap.prototype.install = function(element){

var keymap = this;

function handler(event) {

return keymap.dispatch(event);

}

if(element.addEventListener){

element.addEventListener('keydown',handler,false);

element.addEventListener('keypress',handler,false);

}

else if (element.attachEvent)

{

element.attachEvent('onkeydown',handler);

element.attachEvent('onkeypress',handler);

}

else 

{

element.onkeydown = element.onkeypress = handler;

}

};

Keymap.keyCodeToFunctionKey = {

8:'backspace',9:'tab',13:'return',19:'pause',27:'escape',32:'space',33:'pageup',34:'pagedown',35:'end',36:'home',37:'left',38:'up',39:'right',40:'down',

44:'printscreen',45:'insert',46:'delete',112:'f1',113:'f2',114:'f3',115:'f4',116:'f5',117:'f6',118:'f7',119:'f8',120:'f9',121:'f10',122:'f11',123:'f12',144:'numlock',145:'scrolllock'

};

Keymap.keyCodeToPrintableChar = {

48:'0',49:'1',50:'2',51:'3',52:'4',53:'5',54:'6',55:'7',56:'8',57:'9',59:';',61:'=',65:'a',66:'b',67:'c',68:'d',69:'e',70:'f',71:'g',72:'h',73:'i',74:'j',75:'k',76:'l',77:'m',78:'n',79:'o',

80:'p',81:'q',82:'r',83:'s',84:'t',85:'u',86:'v',87:'w',88:'x',89:'y',90:'z',107:'+',109:'-',110:'.',188:',',190:'.',191:'/',192:'`',219:'[',220:'\\',221:']',222:'\"'

};

//下面这个方法调度基于keymap绑定的按键事件

Keymap.prototype.dispatch = function(event){

var e = event || window.event;

var modifiers = '';

var keyname = null;

if (e.type == 'keydown')

{

var code = e.keyCode;

//忽略shift,alt和ctrl的keydown事件

if (code ==16 || code == 17 || code == 18)

{

return;

}

keyname = Keymap.keyCodeToFunctionKey[code];

//若非功能键，且按下了alt或ctrl键,则将其当作功能键

if(!keyname && (e.altKey || e.ctrlKey))

{

keyname = Keymap.keyCodeToPrintableChar[code];

}

//若找出了这个键的名字，算出modifier，否则返回并忽略此次keydown事件

if (keyname)

{

if(e.altKey) modifiers += 'alt_';

if(e.ctrlKey) modifiers += 'ctrl_';

if(e.shiftKey) modifiers += 'shift_';

}

else return;

}

else if (e.type == 'keypress')

{

//若ctrl或alt被按下，则我们已经处理过了

if (e.altKey || e.ctrlKey)

{

return;

}

//因为在火狐中，功能键也会触发keypress事件，在这种情况下，返回并假装它并非发生

if (e.charCode != undefined && e.charCode == 0 )

{

return;

}

var code = e.charCode || e.keyCode;

keyname = String.fromCharCode(code);

//若键名字为大写，将其转换为小写并加shift，我们这样做是为应对CAPS LOCK,它在不按shift的情况下大写字母

var lowercase = keyname.toLowerCase();

if (keyname != lowercase)

{

keyname = lowercase;

modifiers = 'shift_';

}

}

//现在我们已经确定了modifier和keyname,可以寻找句柄函数了

var func = this.map[modifiers+keyname];

if (!func)

{

func = this.map['default'];

}

if (func)

{

var target = e.target;

if (!target)

{

target = e.srcElement;

}

func(target,modifiers+keyname,e);

//阻止事件传播及默认动作，应注意到，preventDefault通常并不阻止顶级浏览器命令,例如F1引发帮助

if (e.stopPropagation)

{

e.stopPropagation();

}

else e.cancelBubble = true;

if (e.preventDefault)

{

e.preventDefault();

}

else e.returnValue = false;

return false;

}

}

追求卓越，永远向前！