Javascript 中多个热键的代码

Question

我有一个带有 3 个键盘快捷键的应用程序。只有当焦点在网格的一行内时它们才会被触发，所以我添加了一个监听器来处理这个：

if (grid) {
    var host = grid.hostElement;
    //handle the keydown event
    host.addEventListener('keydown', function (e) {
        if (e.altKey && e.key == "q") {  
           doSomething(grid);
        }

        if (e.altKey && e.key == "n") {
           doSomethingElse(grid);
        }
        if (e.altKey && e.key == "u") {
            doAThirdThing(grid);
        }
    });

}

这工作正常，但从性能的角度来看，这是处理此问题的最有效方法吗？我应该改用开关还是多个监听器？

Answer 1

一些问题，为了跨浏览器的兼容性，请使用以下方式获取您的密钥代码：

    var key = e.which || e.keyCode;

支持所有浏览器。其次，e.key 没有很好的浏览器支持 (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)。尽管它说 e.key 在 Chrome 45.0 中受支持，但我认为它在 45.0.2454.85 m 中未定义。这是一个替代方案：

    host.addEventListener('keydown', function (e) {
        var key = e.which || e.keyCode;
        if(e.altKey){
            switch(key){
                case 81:
                    // "q"
                    doSomething(grid);
                    break;
                case 78:
                    // "n"
                    doSomething(grid);
                    break;
                case 85:
                    // "u"
                    doSomething(grid);
                    break;
            }
        }
    });

Answer 2

您可以使用 switch case 语句，因为您始终要检查 e.altKey 是否为相同的值。像这样：

 if (grid) {
    var host = grid.hostElement;
    //handle the keydown event
    host.addEventListener('keydown', function (e) {
        if (e.altKey){
            switch(e.key){
                case "q":
                    doSomething(grid);
                break;

                case "n": 
                   doSomethingElse(grid);
                break

                case "u":
                    doAThirdThing(grid);
                break;
            }
        }
    });
}

把值 e 想象成罐子里的饼干，在每一个 if 语句中，你都把手放在罐子里，检查饼干是什么，然后把它放回罐子里。然后这会发生在每个条件 IF 语句上，这不是很有效。

如果您使用 switch 语句，这与将饼干从罐子里拿出来拿在手中是一样的 - 您可以更快地检查饼干及其任何属性。

在此处阅读有关 switch 语句的更多信息： http://www.w3schools.com/js/js_switch.asp

Javascript 中多个热键的代码

Code for multiple hotkeys in Javascript

javascript

hotkeys

addeventlistener