表单 onsubmit 与提交按钮 onclick

Question

更新 来自@BrendanEich ‏

@mplungjan onclick 提交只是不属于按钮；提交表单显然更好。

---

使用提交按钮的 onclick 来确定是否应该提交表单的原因是什么？

我坚信

1. 在提交前执行某些操作并在出错时取消提交，表单的 onsubmit 事件是放置它的明显位置
2. 如果您使用提交按钮的 onclick 后决定使用 type="image"，则事件处理程序将在许多浏览器中失败
3. 如果您将提交更改为按钮，您还必须将提交添加到 onclick 事件处理程序。

我正在寻找强有力的理由来更喜欢使用提交按钮的 onclick 事件而不是表单的 onsubmit。

更新：请注意，我个人非常了解有关表单提交和验证的许多问题。

例如通过javascript提交不会触发onsubmit http://jsfiddle.net/mplungjan/3A4Ha/

<form onsubmit="alert('onSubmit called')">
    <input type="text" value="This will submit on enter but in IE the onclick is not triggered" style="width:100%"/><br/>
    <input type="submit" onclick="alert('Clicked')" />
</form><br />
<a href="#" onclick="alert('Submitting by script'); return false">Submit by script will not trigger onsubmit</a>

如果你在我的小提琴中按回车键，IE 也不会触发 onclick

---

历史：

在这里讨论

html button not clickable without being disabled

我非常不喜欢使用提交按钮的 onclick 来处理任何事情，因为 很多¹ 年看到这在许多浏览器中不起作用，主要是较旧的IE版本。 我列出了一些明显的原因，但我相信他们不会说服顽固的用户。

SO 的社区可以帮我把它钉在墙上，就像他们钉 w3schools 一样吗？ 也请随时向 cmets 提供我如何以可接受的方式表达这个问题。

---

^{1：从 NS2.x 和 IE3.02 开始}

Answer 1

Form onsubmit 是一种更正确的方法，原因很简单，表单也可以使用<ENTER> 键提交，而不仅仅是单击提交按钮。

Answer 2

没有直接的理由使用 from 的 onsubmit 处理程序而不是按钮的 onclick 处理程序。应该根据他们的意图使用命名事件。

您可以考虑具有两个动作的场景——“发送”动作（如“发送电子邮件”）和“保存”（如“草稿”）。前一个动作假定表单以连贯的方式填写，而后一个动作应该允许用户保持用户喜欢的任何状态。这使得点击处理程序成为决定验证和取消的理想场所。在这种情况下提交事件的相关性是不确定的。

为了使事情变得更加复杂，您可以在场景中添加自动保存和乐观并发。

恕我直言，多年的尝试和错误导致 HTML5 标准裁定该问题支持按钮元素。请参阅按钮的 [form*] 属性，该属性允许单独更改每个按钮的表单操作和方法。