处理$("form").submit和<input type="submit">点击事件的区别是什么？

Question

假设我有以下HTML代码：

<form>
    ...some form fields...
    <input type="submit" id="submitButton" value="Submit" />
</form>

我有一个名为validate的javascript方法，它检查表单字段是否存在各种无效情况，如果一切正常则返回true，否则返回false。

在jQuery中这样做是否有任何实际区别：

$("form").submit(function() {
    return validate();
});

...或者这样做：

$("#submitButton").click(function(){
    return validate();
});

这两种方式之间有什么优缺点吗？

- AJ.

---

这里不适用，但如果你有两个提交按钮，按下“Enter”键只会触发第一个按钮的“click”处理程序。因此，如果你将“click”处理程序绑定到第二个提交按钮，它将不会执行（但绑定到第一个则会）：http://jsfiddle.net/7GJyN/. - pimvdb

Answer 1

仅当用户实际点击提交按钮时才会调用单击回调。但在某些情况下，您可能会通过javascript自动提交表单，在这种情况下，单击回调不会被触发，而提交回调会被触发。我建议始终使用提交进行验证和表单的本质操作，同时使用单击回调来处理与单击按钮相关的动画或其他事项。

- Agi Sferro

---

在文本输入框中按下回车键也会提交表单，而点击处理程序无法捕获它。 - bfavaretto

@bfavaretto：对我来说，在Chrome上可以。 - pimvdb

@pimvdb 您是正确的，我在陈述之前应该进行测试。但是很奇怪，不是吗？当没有点击时，我不会期望触发单击事件。 - bfavaretto

是的，但这在规范中有说明。基本上，它表明按下Enter键与单击提交按钮是相同的操作。 - pimvdb

Answer 2

点击事件比提交事件更早触发。

提交事件：

• 如果某些数据错误，可能太晚阻止事件（适用于一些老版本浏览器）
• 也会在提交命令时触发

点击事件：

• 事件过多，几乎所有内容都与点击相关。性能如何？
• 不会在提交命令时触发

- Eun

Answer 3

第一种方法的优点是，如果您的表单由多个按钮提交或完成不同的操作，则仅在提交按钮上放置验证意味着如果通过其他方法提交表单，则表单可能处于无效状态。

最佳方法是在表单提交时放置验证，因为这样，无论表单如何提交（通过按钮单击、从其他地方以编程方式），验证都将被触发。

- Rory McCrossan