title: "blur" event being triggered for no reason?
body: <p>I have 2 elements. The first element has a <code>blur</code> event, and the second element has a <code>mousedown</code> event. The <code>mousedown</code> event on the second element returns the focus to the first element, but <code>blur</code> on the first element is triggered for some reason, even if the first element wasn't focused before <code>mousedown</code>ing the second element.</p>
  
  <p>Why does this happen? Is this (somehow) desired behaviour, or is this some kind of bug?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Bug?&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;input type="text" /&gt;
  &lt;br /&gt;&lt;br /&gt;
  &lt;button&gt;Click me to focus on the input&lt;/button&gt;
  &lt;br /&gt;&lt;br /&gt;
  &lt;input type="text" /&gt;
  
  &lt;script type="text/javascript"&gt;
      document.getElementsByTagName('input')[0].addEventListener('blur', function(e){
          console.log('blur', e);
      });
  
      document.getElementsByTagName('button')[0].addEventListener('mousedown', function(e){
          console.log('mousedown', e);
  
          document.getElementsByTagName('input')[0].focus();
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/rsh5aopg/" rel="nofollow noreferrer">https://jsfiddle.net/rsh5aopg/</a></p>