title: Why does the form submit event fire when I have stopped propagation at the submit button level?
body: <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form&gt;
      &lt;input type='text'&gt;
      &lt;button type='submit'&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$('form').on('submit', function(e) {
      alert('submit');
      e.preventDefault();
  });
  
  $('button').on('click', function(e) {
      e.stopPropagation();
      alert('clicked');
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/dn9vwwxo/3/" rel="noreferrer">Fiddle</a></p>
  
  <hr>
  
  <p>After watching the great video <a href="http://www.kirupa.com/html5/event_capturing_bubbling_javascript.htm" rel="noreferrer">here</a>, I understand that when I click the submit button, the event bubbles up to the form, and the form's submit event is then triggered. Which explains why "clicked" is alerted before "submit" (before I add <code>e.stopPropagation()</code> to the button handler).</p>
  
  <p>But when I add <code>e.stopPropagation()</code> to the button handler, "submit" is still alerted. Why? I thought that <code>stopPropagation</code> prevents the event from bubbling up to the <code>form</code>, and so the <code>form.on('submit')</code> listener shouldn't be "hearing" an event.</p>