Javascript bind keyup/down event

Как мне привязать функцию к событиям вниз/вниз?

Он может быть привязан ко всему документу или к одному элементу, либо будет работать в этом случае.

Это должно быть без библиотеки JavaScript. Меня интересует только последний Firefox. В частности, элемент холста.

Ive пробовал это: (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>

Ответы

Ответ 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 в большинстве браузеров или 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);
    });
}