我如何使多个独立的document.onkeydown事件起作用？

Question

我正在我的个人网站上工作，并且内置了一些复活节彩蛋热键。在每个页面上，按“ m”键应隐藏菜单，按“ g”键应在当前页面顶部启动游戏。在另一页上，我使用't'和'l'键执行其他CSS更改。在每个页面上，游戏和菜单键均按预期操作，除了带有侦听器“ t”和“ l”的页面。显然存在某种冲突，导致他们无法在每个页面上正常工作。我相信这是因为我在三个不同的文件中声明了侦听器。我想保持这种方式，以便我的网站更具模块化（即，我可以轻松地将游戏的js文件传输到任何其他网站）。有什么想法吗？

第一听众，'m'键：（nav-script.js）

document.addEventListener('keydown', function(evt){
   var evt = evt || window.event;
   if(evt.keyCode == 77){
      showNav();
   }
},false);

第二听众，'g'键：（clickgame.js）

document.onkeydown = enable;

function enable(event){
    // Enables/disables the game

    var event = event || window.event;
    if(event.keyCode == 71 && !enabled){ // 71 is the code for the 'G' key
        game = true;
        enabled = true;
        setup();
    }else if(event.keyCode == 71){
        game = false;
        enabled = false;
        quitgame();
    }
}

第三侦听器，'l'和't'键：（project-focus.js）

document.onkeydown = focusFeatures;

function focusFeatures(event){
    var event = event || window.event;
    if(event.keyCode == 76){
        lightswitch();
    }else if(event.keyCode == 84){
        textswitch();
    }
}

Answer 1

document.onkeydown =分配将覆盖所有先前分配的处理程序。您需要使用addListener有效地为同一事件附加多个处理程序。

或者，您可以只使用jQuery，因为这样会使事情变得容易得多。

Answer 2

执行此操作时：

document.onkeydown = focusFeatures;

您将用onkeydown替换所有其他focusFeatures侦听器。

与document.onkeydown = enable相同。

您应该这样做：

document.addEventListener('keydown', enable, false); // for the games
document.addEventListener('keydown', focusFeatures, false); // for the focus features

Plus您应该首先声明该函数，然后将其分配给侦听器。

Answer 3

我理解每个JS文件都加载到页面上了吗？如果是这样，那么最后一个要加载的文件将破坏以前的document.onkeydown处理程序。

每个文档只能有一个document.onkeydown处理程序，因此您必须进行一些巧妙的事件分派，以确保将它们传播到需要它的每段代码中。诸如jQuery和Google Closure之类的通用库将为您处理此问题。这是jQuery中的示例：

$(document).keydown(function(e) {
    if (e.keyCode == 76) {
        window.console.log("pressed l!");
    }
});

$(document).keydown(function(e) {
    if (e.keyCode == 71) {
        window.console.log("pressed g!");
    }
});

及其链接正在起作用：http://jsfiddle.net/v7v4L/