title: When a 'blur' event occurs, how can I find out which element focus went *to*?
body: <p>Suppose I attach an <code>blur</code> function to an HTML input box like this:</p>
  
  <pre><code>&lt;input id="myInput" onblur="function() { ... }"&gt;&lt;/input&gt;
  </code></pre>
  
  <p>Is there a way to get the ID of the element which caused the <code>blur</code> event to fire (the element which was clicked) inside the function? How?</p>
  
  <p>For example, suppose I have a span like this:</p>
  
  <pre><code>&lt;span id="mySpan"&gt;Hello World&lt;/span&gt;
  </code></pre>
  
  <p>If I click the span right after the input element has focus, the input element will lose its focus. How does the function know that it was <code>mySpan</code> that was clicked?</p>
  
  <p>PS: If the onclick event of the span would occur before the onblur event of the input element my problem would be solved, because I could set some status value indicating a specific element had been clicked.</p>
  
  <p>PPS: The background of this problem is that I want to trigger an AJAX autocompleter control externally (from a clickable element) to show its suggestions, without the suggestions disappearing immediately because of the <code>blur</code> event on the input element. So I want to check in the <code>blur</code> function if one specific element has been clicked, and if so, ignore the blur event. </p>