Question

如何将函数绑定到按键向下/向上事件？

它可以绑定到整个文档或单个元素，在这种情况下也可以。

这必须没有任何JavaScript库。我只关心最新的Firefox。特别是画布元素。

我试过这个：（FF 3.6.9 Windows 7）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div class="wrapper">
            <canvas id="game" width="800" height="400">
            </canvas>
        </div>
        <script type="text/javascript">
            var el = document.getElementById("game");

            el.onkeydown = function(evt) {
                evt = evt || window.event;
                alert("keydown: " + evt.keyCode);
            };

            el.onkeyup = function(evt) {
                evt = evt || window.event;
                alert("keyup: " + evt.keyCode);
            };
        </script>
    </body>
</html>

Answer 1

关键事件仅触发可能获得焦点的文档和元素。因此，要处理<canvas>元素上的关键事件，您需要通过添加tabindex属性（例如<canvas id="game" width="800" height="400" tabindex="1"></canvas>）或通过简单处理整个文档的关键事件来允许它获得焦点，这可能不是您想要的（例如，如果您希望处理关键事件的页面上有多个元素）。

关于如何附加事件处理程序，最简单的方法如下：

var el = document.getElementById("your_element_id");

el.onkeydown = function(evt) {
    evt = evt || window.event;
    alert("keydown: " + evt.keyCode);
};

el.onkeyup = function(evt) {
    evt = evt || window.event;
    alert("keyup: " + evt.keyCode);
};

如果您可能需要多个侦听器，则可以在大多数浏览器中使用addEventListener或在IE中使用attachEvent＆lt; = 8：

if (typeof el.addEventListener != "undefined") {
    el.addEventListener("keydown", function(evt) {
        alert("keydown: " + evt.keyCode);
    }, false);
} else if (typeof el.attachEvent != "undefined") {
    el.attachEvent("onkeydown", function(evt) {
        alert("keydown: " + evt.keyCode);
    });
}

Javascript绑定keyup / down事件

1 个答案: