ajax - How to use Javascript's addEventListener() to override an HTML Form's default submit() behavior

Question

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?

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.

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;
}

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.)

var func = window['mySubmit'];
submitButton.addEventListener('click', func, false);

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.

So how do I do this?

UPDATE

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.

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);
}

Apologies for the messy newbie formatting.

Answer 1

You need to receive the event in your handler function, and prevent the event from executing its default behavior. This applies to click events, submit events - really any event that's cancelable.

// using your example
submitButton.addEventListener('click', func, false);

// here's what func should look like    
function func( event )
{
  if ( event.preventDefault ) event.preventDefault();
  event.returnValue = false;
  // do whatever
}