$ 
 

参考：

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

除了jQuery是一个大库之外，jQuery确实有助于浏览器之间的不一致，特别是对于窗口事件...而且不能被拒绝。希望很明显，我为您的示例提供的jQuery代码更加优雅和简短，但却能以一致的方式实现您想要的功能。您应该能够信任 e （事件）和 e.which （关键代码，了解哪个键被按下）是准确的。在简单的Javascript中，除非你做jQuery库内部所做的一切，否则它有点难以理解。

注意有一个 keydown 事件，这与 keypress 不同。你可以在这里了解更多关于它们的信息： onKeyPress Vs. onKeyUp和onKeyDown

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

另一个jQuery非常有用的例子是使用AJAX。浏览器与AJAX请求的处理方式不一致，所以jQuery摘要，所以你不必担心。

这可能有助于决定：

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

I have an idea for a game in javascript (I'm going to make it with EaselJS) and I'll have to detect keypresses. After looking around on the internet I've seen a lot of suggestions (use window.onkeypress, use jQuery, etc.) but for almost every option there's a counterargument. What do you guys suggest? Using jQuery for this sounds easy enough but I have virtually no experience with that library (and I'm not particulary a veteran at javascript either) so I'd rather avoid it. If jQuery is the best option, can someone give a good example (with explanation would be awesome) of how to do this?

I guess this gets asked a lot but I couldn't find any clear answers. Thanks in advance!

With plain Javascript, the simplest is:

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

But with this, you can only bind one handler for the event.

In addition, you could use the following to be able to potentially bind multiple handlers to the same event:

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

In either case, keyCode isn't consistent across browsers, so there's more to check for and figure out. Notice the e = e || window.event - that's a normal problem with Internet Explorer, putting the event in window.event instead of passing it to the callback.

References:

• https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/keypress
• https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener

With jQuery:

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

Reference:

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

Other than jQuery being a "large" library, jQuery really helps with inconsistencies between browsers, especially with window events...and that can't be denied. Hopefully it's obvious that the jQuery code I provided for your example is much more elegant and shorter, yet accomplishes what you want in a consistent way. You should be able to trust that e (the event) and e.which (the key code, for knowing which key was pressed) are accurate. In plain Javascript, it's a little harder to know unless you do everything that the jQuery library internally does.

Note there is a keydown event, that is different than keypress. You can learn more about them here: onKeyPress Vs. onKeyUp and onKeyDown

As for suggesting what to use, I would definitely suggest using jQuery if you're up for learning the framework. At the same time, I would say that you should learn Javascript's syntax, methods, features, and how to interact with the DOM. Once you understand how it works and what's happening, you should be more comfortable working with jQuery. To me, jQuery makes things more consistent and is more concise. In the end, it's Javascript, and wraps the language.

Another example of jQuery being very useful is with AJAX. Browsers are inconsistent with how AJAX requests are handled, so jQuery abstracts that so you don't have to worry.

Here's something that might help decide:

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