location属性:DOM3级事件添加了一个名为location的属性 , 返回一个long型的常量值 , 表示按下了什么位置的键:DOM_KEY_LOCATION_STANDARD值为0表示默认键盘、DOM_KEY_LOCATION_LEFT值为1表示左侧位置(例如左位的Alt键)、DOM_KEY_LOCATION_RIGHT值为2表示右侧位置(例如右侧的Shift键)、DOM_KEY_LOCATION_NUMPAD值为3表示数字小键盘、DOM_KEY_LOCATION_MOBILE值为4表示移动设备键盘(也就是虚拟键盘)、DOM_KEY_LOCATION_JOYSTICK值为5表示手柄(如控制器);(其中4和5被废弃了)
console.log(event.location);location属性可用于keydown和keyup事件 , 但不能用于keypress事件;IE8及以下和其他低版本的浏览器不支持location属性;低版本的Chrome还支持一个keyLocation等价属性 , 但该值除了按下数字键盘返回3 , 其他都返回0 , 该属性现已废弃;
示例:键盘快捷键的Keymap类:说明:把像PageUp、Alt_Z和ctrl+alt+shift+F5这些按键的标识符映射到Javascript函数 , 这些函数会作为按键的响应而调用;以javascript对象的形式把按键的绑定传给Keymap()构造函数 , 在对象中属性名是按键标识符 , 而属性值是处理程序函数;使用bind()和unbing()方法添加和移除绑定 , 使用install()方法在HTML元素(通常是document对象)上配置Keymap;通过在元素上注册keydown事件处理程序配置Keymap;每次键被按下 , 处理程序检查是否有与按键相关的函数 , 如果有 , 则调用它;在keydown事件处理程序中如果能使用DOM3级事件的key属性就优先使用它 , 如果没有 , 会查找Webkit的keyIdentifier属性然后使用它 , 否则 , 使用keyCode属性;保存为Keymmap.js;如:
// 构造函数function Keymap(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){delete this.map[Keymap.normalize(key)];};// 在指定HTML元素上配置KeymapKeymap.prototype.install = function(element){// 这是事件处理程序var keymap = this;function handler(event){// console.log(event);return keymap.dispatch(event, element);}// 安装if(element.addEventListener)element.addEventListener(keydown, handler, false);else if(element.attachEvent)element.attachEvent(onkeydown, handler);}// 基于Keymap绑定分派按键事件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_;// 如果实现DOM3级规范的key属性 , 获取keyname很容易if(event.key) keyname = event.key;// 在Safari和Chrome上用keyIdentifier获取功能键键名else if(event.keyIdentifier && event.keyIdentifier.substring(0,2) !== U+)keyname = event.keyIdentifier;// 否则 , 使用keyCode属性和后面编码到键名的映射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();elseevent.cancelBubble = true;if(event.preventDefault)event.preventDefault();elseevent.returnValue = https://www.yebaike.net/info/false;}return retval;// 返回处理程序的返回值}};// 用于把的按键标识符转换成标准形式的工具函数// 在非Mac , 把meta映射到ctrl// 在Mac , 把Meta+C变成Command+C , 其他都是Ctrl+CKeymap.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, // 键名使用DOM3级事件的定义和后面的编码到键名的映射delete: del, // 所有的键和值都必须小写return: enter,ctrl: control,space: spacebar,ins: insert};Keymap.keyCodeToKeyName = {// 使用词或方向键的按键8: 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,// 数字小键盘的数字和标点符号按键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,59:;,61:=,186:;,187:=,188:,,190:.,191:/,192:`,219:[,220:/,221:],222:};应用:
- 探云空调是什么牌子
- 美的空调c5是什么意思
- 显卡独显是什么样的 显卡独显是什么意思
- 空调内机风扇不转是什么原因
- 电视在播放中突然黑屏是什么原因
- menu键是什么意思 MENU是什么功能键
- ffu是什么意思 /FF是什么意思
- 962464用九键打出来是什么意思
- 莱万是什么级别 莱万是哪国的
- 京东闪付用的是什么钱