我有一个使用javascript进行游戏的想法（我将使用EaselJS进行开发），并且我将不得不检测按键。在互联网上四处浏览后，我看到了很多建议（使用window.onkeypress，使用jQuery等），但是几乎每个选项都有一个反驳。你们有什么建议？使用jQuery听起来很容易，但是我实际上对该库没有任何经验（而且我也不是JavaScript的资深人士），所以我宁愿避免使用它。如果jQuery是最好的选择，那么有人可以举一个很好的例子（说明会很棒）吗？

我猜这被问了很多，但我找不到任何明确的答案。提前致谢！

使用纯Javascript，最简单的方法是：

document.onkeypress = function (e) {
    e = e || window.event;
    // use e.keyCode
};

但与此同时，您只能为该事件绑定一个处理程序。

此外，您可以使用以下命令将多个处理程序潜在地绑定到同一事件：

addEvent(document, "keypress", function (e) {
    e = e || window.event;
    // use e.keyCode
});

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    } else {
        element["on" + eventName] = callback;
    }
}

无论哪种情况，keyCode在浏览器之间都不是一致的，因此还有更多要检查和找出的问题。注意e = e || window.event-这是Internet Explorer的正常问题，将事件放入window.event而不是将事件传递给回调。

参考文献：

• https://developer.mozilla.org/zh-CN/docs/DOM/Mozilla_event_reference/keypress
• https://developer.mozilla.org/zh-CN/docs/DOM/EventTarget.addEventListener

使用jQuery：

$(document).on("keypress", function (e) {
    // use e.which
});

参考：

• http://api.jquery.com/on/

除了jQuery是“大型”库之外，jQuery确实可以帮助解决浏览器之间的不一致问题，尤其是窗口事件方面的矛盾……这是不能否认的。希望很明显，我为您的示例提供的jQuery代码更优雅，更短，但是以一致的方式实现了您想要的功能。您应该能够相信e（事件）和e.which（键码，用于知道按下了哪个键）是正确的。用普通的Javascript很难知道，除非您执行jQuery库内部执行的所有操作。

请注意，有一个keydown事件与有所不同keypress。您可以在这里了解更多有关它们的信息：onKeyPressVs。onKeyUp和onKeyDown

至于建议使用什么，如果您愿意学习框架，我绝对会建议使用jQuery。同时，我想您应该学习Javascript的语法，方法，功能以及如何与DOM交互。一旦了解了它的工作原理和正在发生的事情，就应该更轻松地使用jQuery。对我来说，jQuery使事情变得更一致，更简洁。最后，它是Javascript，并包装了语言。

jQuery非常有用的另一个示例是AJAX。浏览器与AJAX请求的处理方式不一致，因此jQuery可以抽象出来，因此您不必担心。

这可能有助于做出决定：

• http://www.jscripters.com/jquery-disadvantages-and-advantages/

KEYPRESS（输入键）在摘要
内单击，然后按Enter键。

香草

document.addEventListener("keypress", function(event) {
  if (event.keyCode == 13) {
    alert('hi.');
  }
});

香草速记（ES6）

this.addEventListener('keypress', event => {
  if (event.keyCode == 13) {
    alert('hi.')
  }
})

jQuery的

$(this).on('keypress', function(event) {
  if (event.keyCode == 13) {
    alert('hi.')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery经典

$(this).keypress(function(event) {
  if (event.keyCode == 13) {
    alert('hi.')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery简写（ES6）

$(this).keypress((e) => {
  if (e.keyCode == 13)
    alert('hi.')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

更短（ES6）

$(this).keypress(e=>
  e.which==13?
  alert`hi.`:null
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

由于一些要求，这里有一个解释：

我改写了这个答案，因为随着时间的推移，事物已经过时了，所以我对其进行了更新。

this在文档准备就绪时，为了简洁起见，我过去通常专注于结果内的窗口范围，但这不是必需的。

推荐使用：
将.which和.keyCode方法实际上被废弃了，所以我会建议.code，但我个人仍然使用键代码为性能更快，只为我计数。jQuery经典版本.keypress()并未像某些人所说的那样正式被弃用，但是它们并没有像.on('keypress')它们具有更多功能（活动状态，多个处理程序等）那样被优先使用。'keypress'Vanilla版本中的事件也已弃用。人们应该更喜欢beforeinput或KEYDOWN今天。（注意：与jQuery的事件无关，它们的调用方式相同，但执行方式不同。）

上面的所有示例对于是否已弃用都不算什么。如果发生这种情况，控制台或任何浏览器都应该能够通知您。如果将来有此需要，请对其进行修复。

易读性：
尽管容易使它变得太短且很刺耳也不总是那么好。如果您在团队中工作，则您的代码必须可读且详细。我建议使用jQuery版本.on('keypress')，这是大多数人可以理解的方法。

绩效：
我始终遵循“绩效胜于效率”一词，因为如果有选择的话，任何事情都会更有效，但它应该只执行并执行我想要的，越快越好。这就是为什么.keyCode即使在大多数情况下它都已被弃用，我还是更喜欢它。不过，这完全取决于您。

性能测试

使用event.key和现代的JS！

没有数字代码了。您可以使用"Enter"，"ArrowLeft"，"r"，或任意键名称直接，使你的代码更具可读性。

注意：不建议使用旧的替代方法（.keyCode和.which）。

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "ArrowLeft") {
        // Move Left
    }
    else if (event.key === "Enter") {
        // Open Menu...
    }
});

Mozilla文件

支持的浏览器

有几种方法可以解决这个问题；Vanilla JavaScript可以很好地做到这一点：

function code(e) {
    e = e || window.event;
    return(e.keyCode || e.which);
}
window.onload = function(){
    document.onkeypress = function(e){
        var key = code(e);
        // do something with key
    };
};

或更有条理的处理方式：

(function(d){
    var modern = (d.addEventListener), event = function(obj, evt, fn){
        if(modern) {
            obj.addEventListener(evt, fn, false);
        } else {
            obj.attachEvent("on" + evt, fn);
        }
    }, code = function(e){
        e = e || window.event;
        return(e.keyCode || e.which);
    }, init = function(){
        event(d, "keypress", function(e){
            var key = code(e);
            // do stuff with key here
        });
    };
    if(modern) {
        d.addEventListener("DOMContentLoaded", init, false);
    } else {
        d.attachEvent("onreadystatechange", function(){
            if(d.readyState === "complete") {
                init();
            }
        });
    }
})(document);

不要过于复杂。

  document.addEventListener('keydown', logKey);
    function logKey(e) {
      if (`${e.code}` == "ArrowRight") {
        //code here
      }
          if (`${e.code}` == "ArrowLeft") {
        //code here
      }
          if (`${e.code}` == "ArrowDown") {
        //code here
      }
          if (`${e.code}` == "ArrowUp") {
        //code here
      }
    }