在javascript中检测按键的最简单方法

我有一个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

不同。您可以在此处了解更多有关它们的信息：

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

jQuery非常有用的另一个例子是AJAX。浏览器与AJAX请求的处理方式不一致，因此jQuery抽象了这一点，因此您不必担心

以下是一些可能有助于决定：

---

有几种方法可以解决这个问题；香草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);

按键（输入键）
在代码段内部单击并按Enter键
香草


document.addEventListener（“按键”），函数（事件）{
如果（event.keyCode==13）{
警惕（“嗨”）；
}
});使用
event.key
和现代JS！
再也没有数字代码了。您可以直接使用
“Enter”
、
“ArrowLeft”
、
“r”
，或任何键名，使代码更具可读性

注意：旧的备选方案（
.keyCode
和
.which
）已被弃用


不要过于复杂化

  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
      }
    }

我建议只监听keypress事件，或者它的对应项（keydown或keyup）从这里开始—jQuery是JavaScript；唯一的区别是，jQuery是一个抽象出跨浏览器差异的库，以使编写跨浏览器代码更容易（但不一定更高效）。我建议：如果要实现跨浏览器兼容性，可能还需要触及
attachEvent（）
（顺便说一句，不是我的反对票）大卫托马斯：是的，我还没有到那里：）大卫托马斯我不担心落选，我宁愿把正确的观点表达出来。答案更好吗？我很乐意添加/更改任何看起来可靠的东西，谢谢你的解释！我想我会使用jQuery，我已经对它进行了更多的研究，我想如果我学会使用它，它将对我有好处。@WilliamJones，那是因为它已经被弃用了！我刚刚查看了文档，看到了一个惊喜：。箭头键实际上是“ArrowUp”、“ArrowDown”、“ArrowRight”、“ArrowLeft”为什么我不能“捕获”这些箭头键或[Esc]键？要“捕获”按键：关于
文档。addEventListener（“按键”，函数（事件）
：好的，但为什么我不能“捕获”[Esc]键？因为[Esc]键应该与
“keydown”
一起使用。我说它不推荐使用的原因是……请仔细阅读。最好是对ASCII字符（D、L、%、1、Ä等）使用
keydown
对非字符键（箭头键、Esc、Alt、Ctrl、Page up/down等）使用
keydown
.随着时间的推移，事情可能会发生变化…谢谢你，@Thielicious。我想我已经看到了。但我也没有看到我最后一次给你的回复！至少没有在这里，我当然没有删除它！似乎是其他人做了，或者我看不到它们（听起来很奇怪）！（此外，如果我删除了我的邮件，你会怎么回答呢？。不管怎样，再次感谢！（我希望这能让人理解！）好吧，但为什么我不能“捕获”[Esc]键？恭喜！这个答案应该得到所有的信任！除了是唯一一个可以“捕获”箭头键和[Esc]键的答案之外，之前的所有代码都失败了（至少对我来说），如果实际捕获了所有键盘键，甚至是状态键！！还有一件事：如何删除此事件侦听器？我尝试了
document.removeEventListener（）
，但无效：侦听器继续处于活动状态，即键盘继续处于活动状态
  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
      }
    }