title: What happens when you blur a DOM Element
body: <p>I am having a hard time finding any documentation on what is &quot;suppose&quot; to happen whenever a DOM element is blurred.</p>
  <p>My naive assumption was that the browser would traverse up the DOM to find the next focusable element - but given the following jsfiddle, that is obviously not what happens.</p>
  <p><a href="http://jsfiddle.net/YNuc2/2/" rel="nofollow noreferrer">jsfiddle-example</a></p>
  <pre><code>&lt;!-- HTML ----------------------------- --&gt;
  &lt;body&gt;
      &lt;div id=&quot;root&quot; tabindex=&quot;0&quot;&gt;root
          &lt;div id=&quot;p1&quot; tabindex=&quot;0&quot;&gt;p1
              &lt;div id=&quot;p2&quot; tabindex=&quot;0&quot;&gt;p2
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  /* Javascript */
  var root = document.getElementById(&quot;root&quot;);
  var p1 = document.getElementById(&quot;p1&quot;);
  var p2 = document.getElementById(&quot;p2&quot;);
  
  
  root.addEventListener('keydown', function(event) {
      console.log(&quot;root keydown&quot;); 
  }, false);
  
  p1.addEventListener('keydown', function(event) {
      console.log(&quot;p1 keydown&quot;); 
  }, false);
  
  p2.addEventListener('keydown', function(event) {
      
      console.log(&quot;p2 keydown - blurring p2, hoping that focus will move up the dom to p1&quot;); 
      event.stopPropagation();
      
      p2.blur();
      if (document.activeElement !== p1)
          console.log(&quot;well, that didn't work out so well :( &quot;);
      console.log(&quot;focused element = &quot;);
      console.log(document.activeElement);
      
  }, false);
  
  
  
  p2.focus();
  console.log(&quot;focused element = &quot;);
  console.log(document.activeElement);
  </code></pre>
  <p>So is there a definition of what should happen? What I see happening with Chrome is that the <code>activeElement</code> jumps to the <code>body</code> - and skips all of the focusable items along the way. It is unclear if body is even focused, or is just the default handler for <code>activeElement</code> if nothing else is focused.</p>
  <p>Given a complex object-oriented Javascript application, in which p2 does not know about p1, but assumes that anything higher up in the DOM will gain focus, am I really suppose to manually traverse up the DOM on every <code>blur()</code> event and search for focusable elements and focus them myself?</p>