title: Intercept automatic form submit event in JavaScript / jQuery
body: <p>I'm trying to catch a submit request for a form </p>
  
  <pre><code>&lt;form action='/post' name='submitform' id="submitform" method='post' class='pure-form'&gt;
  &lt;textarea columns="40" rows="4" name='entry[body]' id="statement"&gt;&lt;/textarea&gt;
  &lt;input type='submit' id="submitbutton" name="btnSubmit" value="save" class="pure-button pure-button-primary"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>using</p>
  
  <pre><code> document.querySelector('#submitform').addEventListener('submit', function(e) { /* code */ });
  </code></pre>
  
  <p>which works fine if I click a submit button</p>
  
  <p>but when I call </p>
  
  <pre><code>$('#submitform').submit();
  </code></pre>
  
  <p>or</p>
  
  <pre><code>document.forms["submitform"].submit();
  </code></pre>
  
  <p>the form submits bypassing my event listener.</p>
  
  <p>Why?</p>