使用`event.key`和现代JS！

Question

我对javascript中的游戏有一个想法（我将使用EaselJS制作它），我将不得不检测按键。在互联网上环顾四周后，我看到了很多建议（使用window.onkeypress，使用jQuery等），但几乎每个选项都有反驳。你们有什么建议？使用jQuery这听起来很容易，但我几乎没有使用该库的经验（我也不是特别是javascript的老手）所以我宁愿避免它。如果jQuery是最好的选择，有人可以给出一个很好的例子（解释会很棒）如何做到这一点？

我想这会被问到很多，但我找不到任何明确的答案。提前谢谢！

Answer 1

使用普通的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
});

参考：

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/

Answer 2

KEYPRESS
（输入密钥）

<强>香草：

document.addEventListener("keypress", function(event) {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

香草速记：

this.addEventListener('keypress', (event) => {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

<强> jQuery的：

$(this).on('keypress', function(event) {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

jQuery classic：

$(this).keypress(function(event) {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

jQuery简写：

$(this).keypress((e) => {
    if (e.which == 13) {
        alert('hi.')
    }
})

更短：

$(this).keypress(e=>
    e.which==13?
    alert('hi.'):null
)

demo

Answer 3

使用`event.key`和现代JS！

没有数字代码了。您可以直接使用"Enter"，"ArrowLeft"，"r"或任何键名，从而使您的代码更具可读性。

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "ArrowLeft") {
        // Move Left
    }
    else if (event.key === "Enter") {
        // Open Menu...
    }
});

Mozilla Docs

Supported Browsers

Answer 4

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

Answer 5

别太复杂了。

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

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

5 个答案:

使用`event.key`和现代JS！

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

5 个答案:

使用event.key和现代JS！

使用`event.key`和现代JS！