title: How to use Javascript's addEventListener() to override an HTML Form's default submit() behavior
body: <p>How can I use addEventListener() to assign a handler to an HTML form's Submit button, similar to assignment to the button's 'onclick' attribute, without triggering the form's default submit() behavior?</p>
  
  <p>I have no trouble assigning a custom function to the 'onclick' attribute of the "Submit" button.  The custom function executes a variety of steps, then creates an Ajax request object and uses this to send the data to the server.  The default submit() behavior isn't triggered.</p>
  
  <pre><code>submitButton.onclick = function() {
      mySubmit();
      return false;
  };
  
  function mySubmit() {
     //do stuff
     notTheDefaultUrl = generateNonStandardUrl();
     request = GetStandardAjaxRequestThingamabob();
     request.open("POST", notTheDefaultUrl, true);
     request.onreadystatechange = myHandler;
     request.send(formData);
     return false;
  }
  </code></pre>
  
  <p>But with addEventListener(), the browser submit the request twice -- once under the Ajax request object, and again with the default HTML form submit() behavior.  (I can tell b/c the mySubmit function sends the data to a different URL than the default -- but both the default and the Ajax url are appearing in the server logs.)</p>
  
  <pre><code>var func = window['mySubmit'];
  submitButton.addEventListener('click', func, false);
  </code></pre>
  
  <p>I'm aware that the function assigned to the button must return 'false' to prevent triggering the default submit() behavior.  I thought mySubmit() did that, and I've tried to write the function passed in via addEventListener to return false more explicitly (instead of 'func', 'function() {mySubmit(); return false}') but these dosn't work either.</p>
  
  <p>So how do I do this?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Comments to Peter's raised some browser compatability issues; also, IE doesn't support addEventListener().  This code addresses these.  I've tested it in Firefox and IE 8.</p>
  
  <pre><code>function func( event ) {
      if ( event.preventDefault ) { event.preventDefault()};  
      event.returnValue = false;  
      // do whatever
  }
  
  if (submitButton.addEventListener) {
      submitButton.addEventListener('click', func, false);
  }
  else {
      submitButton.attachEvent('onclick', func);
  }
  </code></pre>
  
  <p>Apologies for the messy newbie formatting.</p>