hotkeys-js库实战记录 - 监听键盘按键(快捷键)

javascript 的 hotkeys-js 库，在npm上可搜索查找，作为自己项目里用来监听键盘快捷键，之前由领导负责的该功能模块，现闲来无事，看了下该库的文档，从头到尾跟着把所有API都测了一遍。

---

 特性概览：

1. 监听键盘按键(快捷键)

2. 默认情况下，INPUT SELECT TEXTAREA 元素不响应快捷键；如有需要则通过设置 hotkeys.filter 进行自定义 >>>  例如某元素某些情况下响应快捷键，某些情况下不响应；

3. 绑定的按键不区分大小写；要区分则在按键的 KeyHandler 函数里处理；

4. 可声明多个活动范围，然后可切换活动范围，从而实现不同场景下，对应的快捷键功能；也就是对不同场景的快捷键功能进行对应功能模块封装。

5. 核心API： hotkeys; hotkeys.setScope; hotkeys.getScope(); hotkeys.deleteScope; hotkeys.trigger; hotkeys.unbind。hotkeys.filter估计很少场景需要，剩下其他5个API个人感觉基本上就用不上了，有兴趣的自行去人家文档里查看。

import hotkeys from 'hotkeys-js';

function initHotkey() {
  hotkeys('b', {
    scope: 'demo'
  }, (event, handler) => {
    console.log('demo 按下');
  });
  hotkeys('q,b', {
  }, (event, handler) => {
    console.log('all按下');
  });
  hotkeys('S,b', {
    scope: 'canvas', // 设置按键所属活动范围（需要激活）; 若参数 scope == false ，则默认值为'all'，all是默认激活(active)。
    keydown: true, // 默认true
    keyup: true, // 默认false
    splitKey: '-', // 默认值为'+' ，组合键连接符，例如原来按2个键触发xx则是s+b， splitKey声明为`-`后，则是s-b
    // capture: true, // 默认值为false, 就是 addEventListener 该函数的第三个参数；
    // element: document, // 默认值为 document , 就是给该 element 添加事件>  element.addEventListener

  }, (event, handler) => {
    // 声明了 scope 参数则必须 setScope 激活。
    // 第二个参数 类型为 string | object | function； 如果hotkeys()传入3个参数，第二个参数则必须是string | object 。
    // 为string时则是 scope 参数，需激活； 为object时，根据object内声明的参数进行对应处理； 
    // 第二个参数为function则是按键触发时的回调函数； 如同第三个参数，也就是说第二个参数是函数，则不需要传入第三个参数；
    if (!event||!handler) {// trigger 用该API触发的回调函数，这两个值都是undefined；根据业务需求需要注意额外处理。
      return
    }
    event?.preventDefault()
    console.log(event, handler, '按下');
    // console.log(event.type); // keydown，keyup参数都为true的情况下，可根据该属性区分按键是按下还是弹起； 最好的方式感觉还是再用hotkeys()重新声明，调整keydown/up的值即可；
    // console.log(event.key); // 若要判断按键触发时的大小写问题，则通过该属性进行处理；
    
  });


  // hotkeys.setScope('canvas'); 
  // 使用“setScope”方法设置当前活动范围; 除了“all”之外，只能有一个活动范围。默认情况下（可手动删除），“all”始终处于活动状态。
  // 注意！如果使用了setScope设置激活范围，则后续的 unbind 这些API 只会作用于该激活的范围！简单来说就是只会作用于 getScope() 返回的范围！
  hotkeys.setScope('canvas')

  console.log(hotkeys.getScope(), '获取当前激活的活动范围，若无则返回all，注意all永远是默认激活的，除非主动delete掉all！');

  // hotkeys.unbind('b', 'all'); // 指定某个活动范围取消绑定该按键
  // hotkeys.unbind('b'); // 取消绑定某个按键; 如果未指定作用域，则默认为当前作用域 getScope()
  // hotkeys.unbind(); // 解除所有活动范围的所有按键绑定！

  function del() {
    hotkeys.deleteScope('canvas')
    setTimeout(() => {
      hotkeys('b', {
        scope: 'canvas'
      }, (event, handler) => {
        console.log('重新注册的 canvas 按下');
      });
      hotkeys.setScope('canvas')
    }, 5000);
  }
  // hotkeys.deleteScope('all') // 删除活动范围
  // hotkeys.deleteScope('canvas') // 删除该活动范围，删除后，无法再设置setScope该活动范围 ！ 想要使用则需要重新 hotkeys() 注册！
  // hotkeys.deleteScope('issues', 'newScopeName'); // 如果需要在删除后，激活新的活动范围则传入第二个参数(需激活的)即可。
  setTimeout(() => {
    console.log('代码里主动触发');
    hotkeys.trigger('b', 'canvas'); // 触发'canvas'活动的b按键事件；但事件回调里不会有event, handler 这2个参数！
    // hotkeys.trigger('b'); // 若不传入scope参数，则默认是触发all活动的按键！

  }, 3000);
}