表格＆＃34;动作＆＃34;和＆＃34; onsubmit＆＃34;：哪个先执行？

Question

我正在尝试调试网页，我看到一个表单元素，其开头是

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

仅具备网络form的基本知识，我想知道action和onsubmit的执行顺序是什么。

Answer 1

如果首先解析action，那么浏览器将离开页面，JS执行环境将消失，并且无法在onsubmit中运行JS，因此它不是

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

Answer 2

onsubmit 必须首先执行，因为从中返回false会停止正在提交的表单，因此action也会被请求。

Answer 3

HTML5规范中解释了这一点：

  

4.10.22.3 Form submission algorithm

     

从元素提交 元素 时   提交者（通常是一个按钮），可选择通过设置form方法标志提交，用户代理必须运行   以下步骤：

     

  

1. 让表单文档为表单＆＃39; submit()。

  

2. 如果表单文档没有关联的Document或其browsing context设置了active sandboxing flag set，则在不执行任何操作的情况下中止这些步骤。

  

3. 让表单浏览上下文成为表单文档的<{3}} 。

  

4. 如果未设置从sandboxed forms browsing context flag方法标记提交的，并且提交者元素的browsing context为false ， 然后   {em>形式的submit()并检查   结果：如果结果是否定的（约束验证结束   有无效的字段，可能通知用户这个）   然后在表单元素中no-validate state命名为invalid   然后中止这些步骤。

  

5. 如果未设置从interactively validate the constraints方法标记提交的，则fire a simple event冒泡且可取消命名   {em>形式的submit 。如果阻止了事件的默认操作（即   如果事件被取消）则中止这些步骤。否则，继续   （实际上，默认操作是执行提交）。

  

6. 让表单数据集成为提交者上下文中表单的submit()的结果。

  

7. 让操作成为提交者元素＆＃39; fire a simple event。

  

8. 如果操作是空字符串，请让操作为表单文档的constructing the form data set。

  

9. action网址操作，相对于提交者元素。如果失败，请中止这些步骤。

  

10. 让操作成为结果the document's address。

  

11. 让操作组件成为生成的Resolve。

  

12. 让计划为结果absolute URL的parsed URL。

  

13. 让 enctype 成为提交者元素＆＃39; scheme。

  

14. 让方法成为提交者元素＆＃39; parsed URL。

  

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

  

16. 如果用户在提交表单时指出了要使用的特定method，那么让目标浏览上下文为   target。否则，请使用目标作为browsing context   名称和表单浏览上下文作为其中的上下文   执行算法，让目标浏览上下文成为   结果browsing context。

  

17. 如果在上一步中创建了目标浏览上下文，或者，如果表单文档尚未the rules for choosing a browsing context given a browsing context name且< em>从browsing context方法标志提交的是   设置，然后让替换为真。否则，就是假的。

  

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

         

               |        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
    

         

    如果 scheme 不是此表中列出的那个之一，则此规范未定义该行为。用户代理应该在   缺乏另一个定义此规范的规范，以某种方式行事   类似于本规范中针对类似方案所定义的内容。

  

因此，在步骤5中，submit被触发，可以取消以防止表单提交。之后行动就解决了。

Answer 4

首先执行

onsubmit以检查格式等。然后执行action以将数据发送/发布到后端。