【js学习笔记-------键盘事件】
当用户在键盘上按下或释放按键时,会发生keydown和keyup事件。它们由辅助键、功能键和字母数字键产生,如果用户按时间足够长会导致它开始重复,那么在keyup事件到达之前会收到多个keydown事件。
这些事件相关的事件对象都有数字属性keyCode。指定了按下的键是哪个。对不动产生的可打印字符的按键,keyCode值是按键上出现的主要字符的Unicode编码。无论Shift键处于什么状,字母键总是产生大写keyCode值,这是因为它们出现在物理键盘上,类似地,即使为了输入标点字符而按下shift键,但数字键产生的keyCode值就是出现在对应键上的数字。对于不可打印键,keyCode属性将是一些其它值。keyCode值尚未标准化,但适当的跨浏览器兼容是可行的。
类似鼠标事件对象,键盘事件对象有altKey、ctrlKey、metakey和shiftKey属性,当事件发生时,如果对应辅助键按下,那么它们会被设置为true。
3级DOM事件规范草案标准化了keydown和keyup事件类型。但没尝试标准化keyCode。相反,它定义了新属性key,它会以字符串的形式包含键名。如果按键对应的是一个可打印字符,那么key属性将仅仅是这个可打印字符。哪按F2 会产生”F2”
functionKeymap(bindings){
this.map = {};
if(bindings){
for(name in bindings) this.bind(name,bindings[name]);
}
}
//绑定指定的按键标识符和指定的处理程序函数
Keymap.prototype.bind= function(key,func){
this.map[Keymap.normalize(key)] = func;
}
Keymap.prototype.unbind= function(key,func){
delete this.map[Keymap.normalize(key)];
}
//在指定html元素上配置keymap
keymap.prototype.install= function(element){
var keymap = this;
function handler(event){returnkeymap.dispatch(event,element);}
//现在安装它
if(element.addEventListener)
element.addEventListener(“keydown”,handler,false);
else
element.attachEvent(“onkeydown”,handler);
}
//这个方法基于绑定分派按键事件
Keymap.prototype.dispatch= function(event,element){
var modifiers = “”;
var keyname = null;
//按照标准的小写字母构建辅助键字符串
if(event.altKey) modifiers+=”alt_”;
if(event.ctrlKey) modifiers+=”ctrl_”;
if(event.metaKey) modifiers+=”meta_”;
if(event.shiftKey) modifiers+=”shift_”;
//如果实现3级DOM规范的key属性,获取keyname很容易
if(event.key) keyname = event.key;
else if(event.keyIdentifier &&event.keyIdentifier.substring(0,2)!==”U+”)
keyname = event.keyIdentifier;
else keyname = Keymap.keyCodeToKeyName[event.keyCode];
//如果不能找出键名,只能返回并忽略这个事件
if(!keyname)return ;
//标准的按键id是辅助键加上小写键名
var keyid =modifiers+keyname.toLowerCase();
//现在查看按键标识符是否绑定任何东西
var handler = this.map[keyid];
if(handler){
var retval =handler.call(element,event,keyid);
//如果处理程序返回false,取消默认操作并阻止冒泡
if(retval===false){
if(event.stopPropagation) event.stopPropagation()
else event.cancelBubble = true;
if(event.preventDefault)event.preventDefault();
else event.returnValue = false;
}
return retval;
}
}
Keymap.normalize =function(keyid){
keyid = keyid.toLowerCase();
var words = keyid.split(/\s+|[\-+_]/);//分割辅助键和键名
var keyname = words.pop();
keyname = Keymap.aliases[keyname] ||keyname;
words.sort();
words.push(keyname);
return words.join(“_”);
}
Keymap.aliases = {
“escape”:”esc”
,“delete”:”del”
,“return”:”enter”
,“ctrl”:”control”
,“space”:”spacebar”
,“ins”:”insert”
}
Keymap.keyCodeToKeyName= {
:”Backspace”,9:”Tab”,13:”Enter”,16:”Shift”,17:”Control”,18:”Alt”,19:”Pause”,20:”CapsLock”,27:”Esc”,32:”Spacebar”,33:”PageUp”,34:”PageDown”,35:”End”,36:”Home”,37:”Left”,38:”Up”,39:”Right”,40:”Down”,45:”Insert”,46:”Del”,
//主键盘(非数字键盘)上的数字
48:”0”,49:”1”,50:”2”,51:”3”,52:”4”,53:”5”,54:”6”,55:”7”,56:”8”,57:”9”,
//字母按键,注意我们不区分大小写
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”,
//数字小键盘的数字和标点符号按键(opera不支持)
96:”0”,97:”1”,98:”2”,99:”3”,100:”4”,101:”5”,102:”6”,103:”7”,104:”8”,105:”9”,106:”Multiply”,107:”Add”,109:”Subtract”,110:”Decimal”,111:”Divide”,
//功能键
112:”F1”,113:”F2”,114:”F3”,115:”F4”,116:”F5”,117:”F6”,118:”F7”,119:”F8”,120:”F9”,121:”F10”,122:”F11”,123:”F12”,124:”F13”,125:”F14”,126:”F15”,127:”F16”,128:”F17”,129:”F18”,130:”F19”,131:”F20”,132:”F21”,133:”F22”,134:”F23”,135:”F24”,
//不需要按Shift键的标点符号键
//连字符不兼容,FF返回的编码和减号一样
59:”;”,61:”=”,186:”;”,187:”=”,
188:”,”,190:”.”,191:”/”,192:”`”,219:”[“,220:”\\”,221:”]”,222:”’”
}