JavaScript经典特效用键盘导航

键盘事件的巧用，是前端开发里一个蛮实用但经常被忽略的技巧。《JavaScript 经典特效——用键盘来导航》这个资源，就专门围绕这个点来做文章，讲得挺细，例子也清晰，适合你用来做功能增强或者优化交互体验。

按键导航的核心，其实就是监听keydown事件，根据用户按的键来做不同动作。常见的操作，比如左箭头切换上一页、数字键跳转到特定板块，这些都能轻松搞定。

资源里用了一段蛮清爽的代码结构，把keyCode和操作映射起来，统一。像这样：

var keyBindings = {
  37: 'left',
  38: 'up',
  39: 'right',
  40: 'down'
};

document.addEventListener('keydown', function(event) {
  var action = keyBindings[event.keyCode];
  if (action) {
    switch (action) {
      case 'left':
        // 左移逻辑
        break;
      case 'right':
        // 右移逻辑
        break;
      // ...
    }
  }
});

如果你想复用这套逻辑，建议封装成一个小工具类，像下面这样。调用也方便，传入你自己的按键映射就好：

function KeyboardNavigator(bindings) {
  this.bindings = bindings;
  document.addEventListener('keydown', this.handleKeyDown.bind(this));
}

KeyboardNavigator.prototype.handleKeyDown = function(event) {
  var action = this.bindings[event.keyCode];
  if (action) {
    // 动作
  }
};

做键盘交互别忘了无障碍体验，比如加个高亮效果、声音反馈，或者让屏幕阅读器知道当前焦点在哪。还有就是别被浏览器默认行为干扰，像阻止滚动要用event.preventDefault()。

用键盘来导航.htm文件基本是 demo 展示，打开看看代码跑一跑，体验一下实际效果，会更有感觉。如果你正好在做后台管理、阅读器、或者图片浏览器，这招有用。

哦对了，如果你对快捷键应用感兴趣，可以顺手看看键盘快捷键大全，收获比你想象得多。