function Keymap(bindings) {
this.map = {}; // Define the key identifier->handler map
if (bindings) { // Copy initial bindings into it
for(name in bindings) this.bind(name, bindings[name]);
}
}
// Bind the specified key identifier to the specified handler function
Keymap.prototype.bind = function(key, func) {
this.map[Keymap.normalize(key)] = func;
};
// Delete the binding for the specified key identifier
Keymap.prototype.unbind = function(key) {
delete this.map[Keymap.normalize(key)];
};
// Install this Keymap on the specified HTML element
Keymap.prototype.install = function(element) {
// This is the event-handler function
var keymap = this;
function handler(event) { return keymap.dispatch(event, element); }
// Now install it
if (element.addEventListener)
element.addEventListener("keydown", handler, false);
else if (element.attachEvent)
element.attachEvent("onkeydown", handler);
};
// This method dispatches key events based on the keymap bindings.
Keymap.prototype.dispatch = function(event, element) {
// We start off with no modifiers and no key name
var modifiers = ""
var keyname = null;
// Build the modifier string in canonical lowercase alphabetical order.
if (event.altKey) modifiers += "alt_";
if (event.ctrlKey) modifiers += "ctrl_";
if (event.metaKey) modifiers += "meta_";
if (event.shiftKey) modifiers += "shift_";
// The keyname is easy if the DOM Level 3 key property is implemented:
if (event.key) keyname = event.key;
// Use the keyIdentifier on Safari and Chrome for function key names
else if (event.keyIdentifier && event.keyIdentifier.substring(0,2) !== "U+")
keyname = event.keyIdentifier;
// Otherwise, use the keyCode property and the code-to-name map below
else keyname = Keymap.keyCodeToKeyName[event.keyCode];
// If we couldn't figure out a key name, just return and ignore the event.
if (!keyname) return;
// The canonical key id is modifiers plus lowercase key name
var keyid = modifiers + keyname.toLowerCase();
// Now see if the key identifier is bound to anything
var handler = this.map[keyid];
if (handler) { // If there is a handler for this key, handle it
// Invoke the handler function
var retval = handler.call(element, event, keyid);
// If the handler returns false, cancel default and prevent bubbling
if (retval === false) {
if (event.stopPropagation) event.stopPropagation(); // DOM model
else event.cancelBubble = true; // IE model
if (event.preventDefault) event.preventDefault(); // DOM
else event.returnValue = false; // IE
}
// Return whatever the handler returned
return retval;
}
};
// Utility function to convert a key identifier to canonical form.
// On non-Macintosh hardware, we could map "meta" to "ctrl" here, so that
// Meta-C would be "Command-C" on the Mac and "Ctrl-C" everywhere else.
Keymap.normalize = function(keyid) {
keyid = keyid.toLowerCase(); // Everything lowercase
var words = keyid.split(/\s+|[\-+_]/); // Split modifiers from name
var keyname = words.pop(); // keyname is the last word
keyname = Keymap.aliases[keyname] || keyname; // Is it an alias?
words.sort(); // Sort remaining modifiers
words.push(keyname); // Add the normalized name back
return words.join("_"); // Concatenate them all
};
Keymap.aliases = { // Map common key aliases to their "official"
"escape":"esc", // key names used by DOM Level 3 and by
"delete":"del", // the key code to key name map below.
"return":"enter", // Both keys and values must be lowercase here.
"ctrl":"control",
"space":"spacebar",
"ins":"insert"
};
// The legacy keyCode property of the keydown event object is not standardized
// But the following values seem to work for most browsers and OSes.
Keymap.keyCodeToKeyName = {
// Keys with words or arrows on them
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",
// Number keys on main keyboard (not keypad)
48:"0",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:"8",57:"9",
// Letter keys. Note that we don't distinguish upper and lower case
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",
// Keypad numbers and punctuation keys. (Opera does not support these.)
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",
// Function keys
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",
// Punctuation keys that don't require holding down Shift
// Hyphen is nonportable: FF returns same code as Subtract
59:";", 61:"=", 186:";", 187:"=", // Firefox and Opera return 59,61
188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222:"'"
};
JavaScript：权威指南：第6个Keymap.js
Keymap.js：将按键事件绑定到处理函数。
此模块定义一个Keymap类。此类的实例代表
键标识符（在下面定义）到处理程序函数的映射。按键图
可以安装在HTML元素上以处理按键事件。当这样
事件发生时，Keymap使用其映射来调用适当的处理程序。
创建Keymap时，可以传递一个JavaScript对象，该对象表示
Keymap的初始绑定集。该对象的属性名称
是关键标识符，属性值是处理函数。
创建键映射后，您可以通过传递键来添加新绑定
identifer和handler函数绑定到bind（）方法。您可以删除
通过将键标识符传递给unbind（）方法进行绑定。
要使用Keymap，请调用其install（）方法，并传递HTML元素，
例如文档对象。 install（）将onkeydown事件处理程序添加到
指定的对象。调用此处理程序时，它确定键
按下的键的标识符，并调用处理程序函数（如果有），
绑定到该密钥标识符。单个Keymap可以安装在多个
一个HTML元素。
关键标识符
键标识符是键加号的不区分大小写的字符串表示形式
同时按下的所有修饰键。密钥名称是
通常是键上的（未移动的）文本。合法密钥名称包括“ A”，“ 7”，
“ F2”，“ PageUp”，“左”，“退格”和“ Esc”。
请参阅此模块中的Keymap.keyCodeToKeyName对象以获取名称列表。
这些是DOM Level 3标准定义的名称的子集，
实现时，此类将使用事件对象的键属性。
密钥标识符也可以包括修饰键前缀。这些前缀是
Alt，Ctrl，Meta和Shift。它们不区分大小写，必须分开
从键名开始，并以空格或下划线彼此之间，
连字符或+。例如：“ SHIFT + A”，“ Alt_F2”，“ meta-v”和“ ctrl alt left”。
在Mac上，Meta是Command键，Alt是Option键。一些浏览器
将Windows键映射到Meta修改器。
处理函数
处理程序作为文档或文档元素的方法被调用，
键盘映射已安装并传递了两个参数：
1）keydown事件的事件对象
2）被按下的键的键标识符
处理程序的返回值成为keydown处理程序的返回值。
如果处理函数返回false，则键盘映射将停止冒泡，并且
取消与keydown事件关联的任何默认操作。
...
最佳答案
代码摘要：
通过KeyMap关键字创建new的新实例。
（可选）可以传递包含键映射的对象，以进行预先绑定：
{
"key-combi1": func1, //key-combi such as alt+a, ctrl+c, shift+s
"key-combi2": func2,
....
"key-combin": funcn //<-- Last property should not end with a comma
}
创建新实例（
var keymap = new Keymap();）后，可以使用以下方法（按逻辑时间顺序列出）：bind-添加其他按键绑定keymap.bind( "key-combi", function );unbind-删除键绑定keymap.unbind( "key-combi" );install-将键映射附加到元素（绑定到keydown事件）keymap.install( element );例子
下面演示了使用此方法的最简单方法：
var keymap = new Keymap; // Create a new instance of Keymap
keymap.bind("ctrl_a", function(event, keyid) { // Bind key combi: ctrl+a
alert("Key pressed down! KeyId: " + keyid)
});
keymap.install(document.body); // Attach keymap to <body>
另一种方法，结果相同：
var keymap = new Keymap({ // Create a new instance of Keymap
"ctrl_a": function(event, keyid) { // Bind key combi: ctrl+a
alert("Key pressed down! KeyId: " + keyid)
}
});
keymap.install(document.body); // Attach keymap to <body>
关于javascript - 您能给我看一下Keymap.js(权威指南)的示例吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8768667/