title: Do event attributes always fire before event listeners?
body: <p>I set two listeners for a form submission. One is specified in the <code>onsubmit</code> attribute, and the other was specified by using an <code>event listener</code>.</p>
  
  <p>Based on my tests, the one specified in the attribute is always firing first. is this always going to be the case? Will event attributes <strong>always</strong> fire first? Or are there cases where this does not occur?</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>function attribute(e) {
    console.log('Attribute');
    e.preventDefault();
  }
  
  function listener(e) {
    console.log('Listener');
    e.preventDefault();
  }
  
  document.querySelector('form').addEventListener('submit', listener);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form onsubmit="attribute(event)"&gt;
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I recognize that <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Event_attributes" rel="nofollow">using event attributes should be "avoided"</a>, and this is more a matter of understanding than anything.</p>