title: JavaScript FocusOut - get the element that receives focus
body: <p>When the <b>FocusOut</b> event is raised, how do you know <b>which element receives the focus</b>?</p>
  
  <p>The correct way seems to be to use the event's <b>relatedTarget</b> property. However, this seems not to work in all browsers:</p>
  
  <ul>
  <li>in Google Chrome, it works</li>
  <li>in Firefox and Internet Explorer, the relatedTarget is null</li>
  <li>in Safari, the relatedTarget property doesn't even exist</li>
  </ul>
  
  <p>I have found a workaround which works only in IE (using document.activeElement), but I'm wondering if there isn't a <b>general solution that has proven to work in all major browsers</b>.</p>
  
  <p>Although I can find similar questions and answers, I haven't found any solution which really works in all browsers.</p>
  
  <p>EDIT: the example below shows what I mean.</p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('text1').addEventListener('focusout', function(e) {
    // At this point, I want to know which element is receiving the focus (i.e. text2)
    console.log(e.relatedTarget); // works in Chrome
    console.log(document.activeElement); // works in IE
    // both do not work in Firefox or Safari
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="text1" type="text" value="first" /&gt;
  &lt;input id="text2" type="text" value="second" /&gt;</code></pre>
  </div>
  </div>
  </p>