Keys.js 官方使用说明

淩亂°似流年 2022-12-29 11:30 137阅读 0赞

Keys由三个类时金字塔的Classes组成，从最小的单元（Key）开始到全局Document的事件管理器（Bindings）。

包括：key、combo、Bindings

*  **key**

这个Class管理键盘上单个物理按键的信息。可以使用**key.a**或**key\['Num Lock'\]**引用给定的实例。理论上不需要手动创建Key的新实例，因为键盘上的所有键都已经定义了静态实例。

*  **Combo**

这个Class管理键盘上物理组合键信息。具体地说，一个任何类型的物理键，以及特殊按键（SHIFT、ALT、meta等）的任意组合。Combo是将keypress事件中按下的键与希望对其执行行为的组合中所需的键相匹配（由Bindings类管理）。

可以使用以下变量轻松创建组合：

1.  `// Single key`
2.  `var combo = new Combo(Key.A);`
3.  `// Single meta key`
4.  `var combo = new Combo(Key.A, Key.CTRL);`
5.  `// Multiple meta keys, constructor called as a variadic function`
6.  `var combo = new Combo(Key.A, Key.CTRL, Key.SHIFT);`
7.  `// Multiple meta keys passed as an array`
8.  `var combo = new Combo(Key.A, [ Key.CTRL, Key.SHIFT ]);`

*  **Bindings**

这个class管理Action到组合的映射。如果找到一个匹配键的组合键，则按Event创建一个组合键，执行该组合和事件类型的任何处理程序（您可以为keydown/keyup使用不同的处理程序）。

注意：页面上只能有一个Bindings实例，否则将遇到重复/删除事件。

Bindings提供了一个简单的API，用于获取组合和绑定行为。首先，必须使用add创建keybinding：

1.  `var bindings = new Bindings();`
2.  `// 典型的binding语法`
3.  `bindings.add('displayAlert', new Combo(Key.A, Key.CTRL, Key.SHIFT));`
4.  `bindings.add('toggle', new Combo(Key.S, Key.CTRL, Key.META));`
5.  `// 一个事件绑定多个bindings`
6.  `bindings.add('anotherEvent', new Combo(Key.D, Key.META), new Combo(Key.D, Key.SHIFT));`

绑定添加行为Bingings.registerHandler. 您还可以为一个事件添加多个处理程序（例如，一个用于撤消逻辑的处理程序，一个用于执行实际操作的处理程序）。

1.  `var displayAlert = function() { alert('Hello!'); };`
2.  `// Inferred binding name and eventType syntax`
3.  `bindings.registerHandler(displayAlert);`
4.  `// Inferred eventType syntax`
5.  `bindings.registerHandler('displayAlert', function(ev) { alert('Hello!'); });`
6.  `// Full syntax`
7.  `bindings.registerHandler('displayAlert', 'keypress', function(ev) { alert('Hello!'); });`

`反向注册Bindings.unregisterHandler`.

1.  `// Unregister handler for a given name/function pair`
2.  `bindings.unregisterHandler('displayAlert', displayAlert);`
3.  `// Unregister handler for a specific event`
4.  `bindings.unregisterHandler('keyup', 'displayAlert');`
5.  `// Unregister all handlers with a given name`
6.  `bindings.unregisterHandler('displayAlert');`

If you have toggle-like behavior you'd like to implement, you are in luck! Register your toggle using `registerToggle`:

可以非常方便的实现类似Toggle的行为，使用registerToggle注册您的切换：

1.  `var toggleOn = function() { console.log('Lights on!'); };`
2.  `var toggleOff = function() { console.log('Lights off!'); };`
3.  `bindings.registerToggle('toggle', toggleOn, toggleOff);`

注意**:** Toggle从Off位置开始生效。