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

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而不是将其传递给回调.

参考文献:

• 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和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经典:

$(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
)

演示

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文档

支持的浏览器

Answer 4

不要过于复杂化。

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

Answer 5

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