javascript - Why submitting a form overrides setting location.href in a submit button click handler?

Question

This question is inspired by this post.

In a nutshell: Why window.location.href is not redirecting to a new page (example.com) when executing the code below?

<form>
    <input type="submit" id="submit" value="Submit">
</form>
<script>
    document.getElementById('submit').addEventListener('click', function (e) {
        window.location.href = "http://www.example.com";
    });
</script>

I've always believed, that setting window.location.href immediately loads a new page, but in this case it doesn't. Submitting the form just reloads the page instead, and setting a new location seems to be totally ignored. Why? How? What I'm missing here?

Please notice, that I'm aware of several ways how to prevent form submitting in this case, rather I'd like to know, why setting location.href is ignored, what is the mechanism behind the behavior? I've tried to search explanation from the standard, but haven't found anything so far.

Additional information

This seems to happen in all major browsers (Chrome, Firefox, IE11, Edge ...), but not when the code is run in a Stack snippet (because it's sandboxed, and won't send forms anyway). A console.log put in the function shows, that the click handler is executed before the actual submission is executed.

A jsFiddle reproducing the issue.

Answer 1

You can see easier here what is happening step by step if you will try tu change location drunning form submission

JSFIDDLE

If you will check your browser network tab than you can see that the submit request is cancelled (but still sent) by redirect request. I believe that same situation occurs when you trying to do it onclick or onsubmit the first request just cancelling the next one and prevent window.location.href redirection.