title: Javascript bind keyup/down event
body: <p>How do I bind a function to the key down/up events?</p>
  
  <p>It can be either binded to the entire document or a single element, either will work in this case.</p>
  
  <p>This has to be without any JavaScript library. I am only primarily concerned with the latest Firefox. Particularly the canvas element.</p>
  
  <p>Ive tried this: (FF 3.6.9 Windows 7)</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Test&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="wrapper"&gt;
              &lt;canvas id="game" width="800" height="400"&gt;
              &lt;/canvas&gt;
          &lt;/div&gt;
          &lt;script type="text/javascript"&gt;
              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);
              };
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>