我有一个用 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而不是将其传递给回调。
参考：
使用 jQuery：
$(document).on("keypress", function (e) {
// use e.which
});
参考：
除了 jQuery 是一个“大型”库之外，jQuery 确实有助于解决浏览器之间的不一致问题，尤其是窗口事件……这是不可否认的。希望很明显，我为您的示例提供的 jQuery 代码更优雅、更短，但仍能以一致的方式完成您想要的操作。您应该能够相信e（事件）和e.which（键代码，用于了解按下了哪个键）是准确的。在普通的 Javascript 中，除非您完成 jQuery 库内部所做的一切，否则很难知道。
请注意，有一个keydown事件，与keypress. 您可以在此处了解有关它们的更多信息：onKeyPress Vs。onKeyUp 和 onKeyDown
至于建议使用什么，如果您准备学习该框架，我肯定会建议使用 jQuery。同时，我会说你应该学习Javascript的语法、方法、特性以及如何与DOM交互。一旦你理解了它是如何工作的以及发生了什么，你应该更习惯使用 jQuery。对我来说，jQuery 使事情更加一致并且更加简洁。最后，它是 Javascript，并包装了语言。
jQuery 非常有用的另一个例子是 AJAX。浏览器与 AJAX 请求的处理方式不一致，因此 jQuery 将其抽象化，因此您不必担心。
以下内容可能有助于您做出决定：
KEYPRESS（回车键）
在代码片段内部单击，然后按回车键。
香草
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>由于一些要求，这里有一个解释：
我重写了这个答案，因为随着时间的推移，事情已经被弃用了，所以我更新了它，因为评论中的一些人说它太多了“bla-bla”。这不是关于“keydown”，而是关于“keypress”。所以一些像“Esc”这样的非字符键不应该这样工作。
this当文档准备好时，为了简洁起见，我过去常常关注结果中的窗口范围，但这不是必需的。
推荐使用：
将.which和.keyCode方法实际上被废弃了，所以我会建议.code，但我个人仍然使用键代码为性能更快，只为我计数。jQuery 经典版本.keypress()并未像某些人所说的那样正式弃用，但它们不再受青睐，.on('keypress')因为它具有更多功能（实时状态、多个处理程序等）。'keypress'Vanilla 版本中的事件也已弃用。今天，人们应该更喜欢beforeinput或keydownkeyup。
性能：
越快越好。这就是为什么我更喜欢.keyCode即使它被认为已弃用（在大多数情况下）。不过，这一切都取决于您（Promise 2020）。
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...
}
});
有几种方法可以处理；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
}
}