在Javascript中处理多个关键事件的最佳方法是什么？

Question

在游戏中按空格键会进行角色拍摄,当显示确认框时按空格键会使此框消失,按高分形式按空格键将在输入框中添加空格.在此示例中,同一个键有几个事件,但一次只触发一个事件.

是否有一般(或特定于Javascript)方法或编程方式将事件添加到某个键,所以它们只在某些情况下执行？

当然可以这样做:

var inGame = true|false;
var inConfirmationBox = true|false;

function spaceBarHandler(){
    if(inGame){ /*shoot*/}
    else if(inConfirmationBox){ /*remove box*/}
}

document.onkeydown = function(){ /* call space bar handler if space bar was pressed */ };

但这是一种非常混乱的编程方式,因为特定的动作在空格键处理函数中混合在一起,这使维护变得困难.

处理一个键的多个事件的最佳方法是什么,以便这些事件仅在某些情况下触发？

Answer 1

函数是 JavaScript 中的一流对象，这使得它们非常强大。正因为如此，你的问题才能得到非常优雅的解决。

// the whole thing can be encapsulated 
// into an object actually

function spaceBarHandler() {
  var state = spaceBarHandler.state;
  var actions = spaceBarHandler.actions;

    // execute function if exists
    if (actions[state]) {
      actions[state]();
    }
}

// spaceBar actions
spaceBarHandler.actions = {
  shoot: function() {
    // bang bang
  },
  removeBox: function() {
    // do it...
  }
};

// change current state from outside
// we are in the game
spaceBarHandler.state = "shoot";

// change current state from outside
// confirmation box is shown 
spaceBarHandler.state = "removeBox";

所有这些情况都将由一个函数处理。如果您想扩展另一种情况，只需向 actions 对象添加另一个函数即可。请注意整个事物是如何封装到一个对象中的。