【js学习笔记-098】-------键盘事件

来源：互联网发布：js 设置data属性编辑：程序博客网时间：2024/06/05 16:57

【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:”’”

}

0 0