title: How can I give keyboard focus to a DIV and attach keyboard event handlers to it?
body: <p>I am building an application where I want to be able to click a rectangle represented by a DIV, and then use the keyboard to move that DIV by listing for keyboard events.</p>
  
  <p>Rather than using an event listener for those keyboard events at the document level, can I listen for keyboard events at the DIV level, perhaps by giving it keyboard focus?</p>
  
  <p>Here's a simplified sample to illustrate the problem:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="outer" style="background-color:#eeeeee;padding:10px"&gt;
  outer
  
     &lt;div id="inner" style="background-color:#bbbbbb;width:50%;margin:10px;padding:10px;"&gt;
     want to be able to focus this element and pick up keypresses
     &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script language="Javascript"&gt;
  
  function onClick()
  {
      document.getElementById('inner').innerHTML="clicked";
      document.getElementById('inner').focus();
  
  }
  
  //this handler is never called
  function onKeypressDiv()
  {
      document.getElementById('inner').innerHTML="keypress on div";
  }
  
  function onKeypressDoc()
  {
      document.getElementById('inner').innerHTML="keypress on doc";
  }
  
  //install event handlers
  document.getElementById('inner').addEventListener("click", onClick, false);
  document.getElementById('inner').addEventListener("keypress", onKeypressDiv, false);
  document.addEventListener("keypress", onKeypressDoc, false);
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>On clicking the inner DIV I try to give it focus, but subsequent keyboard events are always picked up at the document level, not my DIV level event listener.</p>
  
  <p>Do I simply need to implement an application-specific notion of keyboard focus?</p>
  
  <p>I should add I only need this to work in Firefox.</p>