問題描述

我有一個 javascript 游戲的想法(我將使用 EaselJS 制作它)，我必須檢測按鍵.在互聯(lián)網(wǎng)上環(huán)顧四周后，我看到了很多建議(使用 window.onkeypress，使用 jQuery 等)，但幾乎每個選項都有反駁.你們有什么建議?使用 jQuery 聽起來很容易，但我?guī)缀鯖]有使用該庫的經(jīng)驗(而且我也不是 javascript 的資深人士)所以我寧愿避免使用它.如果 jQuery 是最好的選擇，有人可以舉一個很好的例子(解釋會很棒)嗎?

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!

推薦答案

用純Javascript，最簡單的是:

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

在任何一種情況下，keyCode 在瀏覽器中都不一致，因此需要檢查和找出更多內(nèi)容.注意 e = e ||window.event - 這是 Internet Explorer 的正常問題，將事件放在 window.event 中，而不是將其傳遞給回調(diào).

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.

參考資料:

• 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 代碼更優(yōu)雅、更短，但以一致的方式完成了您想要的工作.您應該能夠相信 e (事件)和 e.which (鍵碼，用于知道按下了哪個鍵)是準確的.在純 Javascript 中，除非您執(zhí)行 jQuery 庫內(nèi)部所做的所有事情，否則很難知道.

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.

注意有一個 keydown 事件，它不同于 keypress.您可以在此處了解有關它們的更多信息:onKeyPress Vs.onKeyUp 和 onKeyDown

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

至于建議使用什么，如果您準備學習該框架，我肯定會建議使用 jQuery.同時，我想說你應該學習 Javascript 的語法、方法、特性，以及如何與 DOM 交互.一旦你理解了它是如何工作的以及發(fā)生了什么，你應該更容易使用 jQuery.對我來說，jQuery 讓事情變得更加一致和簡潔.最后，它是 Javascript，并包裝了語言.

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.

另一個非常有用的 jQuery 例子是 AJAX.瀏覽器與 AJAX 請求的處理方式不一致，因此 jQuery 抽象了這一點，因此您不必擔心.

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/

這篇關于在javascript中檢測按鍵的最簡單方法的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！