title: JavaScript click and focus event order
body: <p>I have a span inside a div, the div has an <code>onfocus()</code> event, while the span has an <code>onclick()</code> like so:</p>
  <pre><code>&lt;div id=&quot;divEl&quot; tabindex=&quot;0&quot;&gt;
    &lt;span id=&quot;spanEl&quot;&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://jsfiddle.net/nyva4jrc/" rel="nofollow noreferrer">https://jsfiddle.net/nyva4jrc/</a></p>
  <p>When clicking on the span, the <code>div.focus</code> event fires first, despite the fact that, by my understanding, it should only fire after the click has bubbled up to the div.</p>
  <p>Is there a a reason for this, and is the event firing order in this situation defined? Also is there any reference for the order in which dissimilar events fire?</p>