Javascript 表单的“action”和“onsubmit”：哪个先执行？

A form's "action" and "onsubmit": Which executes first?

提问by Not John Skeet

I'm trying to debug a webpage and I see a form element whose opening is

我正在尝试调试网页，但我看到一个表单元素的打开方式是

<form name="aspnetForm" method="post" action="default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">

Having only a base knowledge of web forms, I'm wondering what the order of execution is for the actionand onsubmit.

只有 webform的基础知识，我想知道actionand的执行顺序是什么onsubmit。

回答by Quentin

If actionwas resolved first, then the browser would leave the page, the JS execution environment would go away, and there would be nowhere to run the JS in onsubmit, so it isn't.

如果action先解决了，那么浏览器就会离开页面，JS执行环境就会消失，在onsubmit.

Event handlers run before default actions. They can cancel default actions.

事件处理程序在默认操作之前运行。他们可以取消默认操作。

回答by Oriol

This is explained in the HTML5 spec:

这在 HTML5 规范中有解释：

4.10.22.3 Form submission algorithm

When a formelement formis submittedfrom an element submitter(typically a button), optionally with a submitted from submit()methodflag set, the user agent must run the following steps:

1. Let form documentbe the form's Document.

2. If form documenthas no associated browsing contextor its active sandboxing flag sethas its sandboxed forms browsing context flagset, then abort these steps without doing anything.

3. Let form browsing contextbe the browsing contextof form document.

4. If the submitted from submit()methodflag is not set, and the submitterelement's no-validate stateis false, then interactively validate the constraintsof formand examine the result: if the result is negative (the constraint validation concluded that there were invalid fields and probably informed the user of this) then fire a simple eventnamed invalidat the formelement and then abort these steps.

5. If the submitted from submit()methodflag is not set, then fire a simple eventthat bubbles and is cancelable named submit, at form. If the event's default action is prevented (i.e. if the event is canceled) then abort these steps. Otherwise, continue (effectively the default action is to perform the submission).

6. Let form data setbe the result of constructing the form data setfor formin the context of submitter.

7. Let actionbe the submitterelement's action.

8. If actionis the empty string, let actionbe the document's addressof the form document.

9. Resolvethe URL action, relative to the submitterelement. If this fails, abort these steps.

10. Let actionbe the resulting absolute URL.

11. Let action componentsbe the resulting parsed URL.

12. Let schemebe the schemeof the resulting parsed URL.

13. Let enctypebe the submitterelement's enctype.

14. Let methodbe the submitterelement's method.

15. Let targetbe the submitterelement's target.

16. If the user indicated a specific browsing contextto use when submitting the form, then let target browsing contextbe that browsing context. Otherwise, apply the rules for choosing a browsing context given a browsing context nameusing targetas the name and form browsing contextas the context in which the algorithm is executed, and let target browsing contextbe the resulting browsing context.

17. If target browsing contextwas created in the previous step, or, alternatively, if the form documenthas not yet completely loadedand the submitted from submit()methodflag is set, then let replacebe true. Otherwise, let it be false.

18. Otherwise, select the appropriate row in the table below based on the value of schemeas given by the first cell of each row. Then, select the appropriate cell on that row based on the value of methodas given in the first cell of each column. Then, jump to the steps named in that cell and defined below the table.

               |        GET        |         POST
    -------------------------------------------------------
    http       | Mutate action URL | Submit as entity body
    https      | Mutate action URL | Submit as entity body
    ftp        | Get action URL    | Get action URL
    javascript | Get action URL    | Get action URL
    data       | Get action URL    | Post to data:
    mailto     | Mail with headers | Mail as body
    

    If schemeis not one of those listed in this table, then the behavior is not defined by this specification. User agents should, in the absence of another specification defining this, act in a manner analogous to that defined in this specification for similar schemes.

4.10.22.3 表单提交算法

当一个form元件形式被提交从元素 提交（通常为按钮），任选地与从提交submit()方法标志设置，则用户代理必须执行下面的步骤：

1. 让表单文档成为表单的Document.

2. 如果表单文档没有关联的浏览上下文，或者其活动沙盒标志集设置了其沙盒表单浏览上下文标志，则不执行任何操作就中止这些步骤。

3. 设表单浏览上下文为表单文档的浏览上下文。

4. 如果从提交submit()方法标志未设置，并且提交元素的无验证状态是假的，那么 交互验证约束的形式，检查结果：如果结果为负（约束验证的结论是有无效的领域和可能获悉此事的用户），然后触发一个简单的事件命名invalid的形式元素，然后跳过这些步骤。

5. 如果未设置submit fromsubmit()方法标志，则触发一个简单的冒泡事件，名为submit,可取消 ，位于form。如果事件的默认操作被阻止（即如果事件被取消），则中止这些步骤。否则，继续（实际上默认操作是执行提交）。

6. 让表单数据集是在submitter上下文中为表单构建表单数据集的结果。

7. 让action成为提交者元素的action。

8. 如果动作是空字符串，让行动是文档的地址了的格式文件。

9. 解析URL action，相对于提交者元素。如果失败，请中止这些步骤。

10. 让action成为结果的绝对 URL。

11. 让动作组件成为解析后的 URL。

12. 令scheme为结果解析 URL的方案。

13. 让enctype成为提交者元素的enctype。

14. 让method成为提交者元素的method。

15. 让target成为提交者元素的target。

16. 如果用户在提交表单时指定了要使用的特定浏览上下文，则让目标浏览上下文为该 浏览上下文。否则，在给定浏览上下文名称的情况下应用选择浏览上下文的规则，使用target作为名称，表单浏览上下文作为执行算法的上下文，并让目标浏览上下文作为结果浏览上下文。

17. 如果在上一步中创建了目标浏览上下文，或者，如果表单文档尚未完全加载并且设置了提交自submit()方法标志，则让replace为真。否则，让它成为假的。

18. 否则，根据每行的第一个单元格给出的方案值，在下表中选择适当的行。然后，根据 每列第一个单元格中给出的方法值选择该行上的适当单元格。然后，跳转到在该单元格中命名并在表格下方定义的步骤。

               |        GET        |         POST
    -------------------------------------------------------
    http       | Mutate action URL | Submit as entity body
    https      | Mutate action URL | Submit as entity body
    ftp        | Get action URL    | Get action URL
    javascript | Get action URL    | Get action URL
    data       | Get action URL    | Post to data:
    mailto     | Mail with headers | Mail as body
    

    如果方案不是此表中列出的方案之一，则本规范未定义该行为。在没有其他规范对此进行定义的情况下，用户代理应该以类似于本规范中为类似方案定义的方式进行操作。

Therefore, at step 5, the submitis fired, and can be canceled to prevent form submission. The action is resolved after that.

因此，在第 5 步，submit被触发，并且可以取消以防止表单提交。之后该动作就解决了。

回答by Jamiec

The onsubmitmustexecute first, as returning false from it stops the form being submitted, and thus the actionever being requested.

在onsubmit必须首先执行，从它停止提交表单，从而返回falseaction曾经被请求。

回答by Searene

onsubmitis executed first in order to check the format etc. Then actionis executed to get/post the data to the backend.

onsubmit首先执行以检查格式等。然后action执行以获取/发布数据到后端。