在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"; 

所有这些情况将由一个函数处理。如果您想要扩展另一个案例，您只需将其他功能添加到操作对象。注意整个事物是如何封装到一个对象中的。

Answer 2

将事件监听器附加到个别元素而不是整个文档。

document.getElementById('highscore').onkeypress = function(keyEvent) { 
     if (is_spacebar(keyEvent)) //Do something... 
}; 

document.getElementById('game').onkeypress = function(keyEvent) { 
     if (is_spacebar(keyEvent)) //Do something else... 
}; 

这是一个简单的例子。当使用addEventListener（）将函数附加到事件时，您可能必须处理可以控制的事件冒泡。鉴于涉及此问题的浏览器（IE）兼容性问题，应该使用一些JS库来处理事件。

Answer 3

有几种方法，通常涉及IE的'特殊'事件模型的代码分支。

一种方法是停止冒泡到文档的关键处理程序处理进一步下跌按键：

confirmationbox.onkeydown = function(event) { 
    if (event === undefined) event = window.event; 

    // do something with event.keyCode 

    if ('stopPropagation' in event) // standards browsers 
     event.stopPropagation(); 
    else if ('cancelBubble' in event) // IE before version 9 
     event.cancelBubble = true; 
}; 

document.onkeydown = ... // will not be called for keydowns inside confirmationbox 

另一种方法是检查事件的目标元素，看它是否在框中：

document.onkeydown = function(event) { 
    if (event === undefined) event = window.event; 
    var target = 'target' in event ? event.target : event.srcElement; // srcElement is for IE<9 

    if (target === containerbox || isDescendantOf(target, containerbox) { 
     // do containerbox stuff 
    } else { 
     // do other stuff 
    } 
}; 

function isDescendantOf(element, ancestor) { 
    while (element = element.parentNode) 
     if (element === ancestor) 
      return true; 
    return false; 
} 

Answer 4

您可以根据需要添加和删除事件侦听器。

让我们假设你使用的是JavaScript框架（如果你没有，那么你或许应该考虑参与这样的比赛JS代码量）

使用PrototypeJS：

时游戏开始时，

document.observe("keydown",shootHandler()); 

在创建消息框，

function createBox(text) { 
    ...snip 

    document.observe("keydown",closeBox()); 
    document.fire("game:pause"); 
} 

和，例如

var paused = false; 

function shoothandler() { 
    if (!paused) { 
     alert("pew! pew!"); 
    } 
} 

function closeBox() { 
    $('messagebox').remove(); 
    document.fire("game:unpaused"); 
    document.stopObserving("keydown",closeBox()); 
} 

document.observe("game:paused", function() { paused = true;}); 
document.observe("game:unpaused", function() { paused = false;}); 
document.observe("game:over", function() { document.stopObserving("keydown",shootHandler());}); 

我没有包括高分屏幕，但理论是相同的。

正如您所见，我还使用自定义事件来通知暂停状态。同样的事件也可以通过界面中的puase按钮触发，等等......