Javascript 绑定 keyup/down 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3690904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript bind keyup/down event
提问by Petah
How do I bind a function to the key down/up events?
如何将函数绑定到按键按下/按下事件？
It can be either binded to the entire document or a single element, either will work in this case.
它可以绑定到整个文档或单个元素，在这种情况下都可以使用。
This has to be without any JavaScript library. I am only primarily concerned with the latest Firefox. Particularly the canvas element.
这必须没有任何 JavaScript 库。我只关心最新的 Firefox。特别是画布元素。
Ive tried this: (FF 3.6.9 Windows 7)
我试过这个：（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>
回答by Tim Down
Key events only fire on the document and elements that may receive focus. Therefore to handle key events on a <canvas>element, you either need to allow it to receive focus by adding a tabindexattribute (e.g. <canvas id="game" width="800" height="400" tabindex="1"></canvas>) or by simply handling key events for the whole document, which may not be what you want (for example, if you have more than one element on the page for which you wish to handle key events).
关键事件仅在可能获得焦点的文档和元素上触发。因此，要处理<canvas>元素上的关键事件，您需要通过添加tabindex属性（例如<canvas id="game" width="800" height="400" tabindex="1"></canvas>）或简单地处理整个文档的关键事件来使其获得焦点，这可能不是您想要的（例如，如果您有您希望处理关键事件的页面上有多个元素）。
As to how to attach the event handlers, the simplest way is the following:
至于如何附加事件处理程序，最简单的方法如下：
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);
};
If you may need multiple listeners, you can use addEventListenerin most browsers or attachEventin IE <= 8:
如果您可能需要多个监听器，您可以addEventListener在大多数浏览器或attachEventIE <= 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);
});
}
