javascript - 如何检测 Javascript 中的按键？

Question

在互联网上四处寻找之后，我看到了很多建议(使用 window.onkeypress、使用 jQuery 等)，但几乎每个选项都有反对意见。我如何检测 Javascript 中的按键？

Answer 1

对于纯 Javascript，最简单的是:

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

但是有了这个，您只能为事件绑定(bind)一个处理程序。

此外，您可以使用以下方法将多个处理程序潜在地绑定(bind)到同一事件:

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/en-US/docs/DOM/Mozilla_event_reference/keypress
• https://developer.mozilla.org/en-US/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。您可以在这里了解更多信息:onKeyPress Vs. onKeyUp and onKeyDown

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

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

这里有一些可能有助于做出决定的东西:

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