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 be

Answer 1

I belive the key thing here is not to view the problem as 'form submission vs page redirect', but as an event-listeners issue.

What you are doing is to attach an event listener to an html element. And it seems that the policy of DOM elements is to execute all the event listeners first, and then the event itself . In your case, the page is redirected to the url you provided, because you set window.location inside the listener, then the submit event itself takes place, so the same blank page is reloaded

The fact that "event flow process will complete after all listeners have been triggered" is stated here: http://www.w3.org/TR/DOM-Level-2-Events/events.html

So far I haven't figgured out a way to execute the listeners after the event , but if that can be done, that is all you need to make this example work