代码之家 › 专栏 › 技术社区 › Petah

Javascript bind keyup/down事件

javascript-events javascript

Petah · 技术社区 · 14 年前

它既可以绑定到整个文档,也可以绑定到单个元素,在这种情况下两者都可以。

这必须没有任何JavaScript库。我只关心最新的火狐。尤其是画布元素。

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

1 回复 | 直到 14 年前

Tim Down 14 年前

关键事件只在文档和可能接收焦点的元素上触发。因此要处理 <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 attachEvent 在IE<=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);
    });
}

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前