Ключевые события запускаются только для документа и элементов, которые могут получить фокус. Поэтому для обработки ключевых событий в элементе <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: </p>
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);
});
}