表单 onSubmit vs onClick

Posted 2023-02-22

【中文标题】表单 onSubmit vs onClick

【英文标题】：form onSubmit vs onClick

【发布时间】：2018-11-03 02:19:27

【问题描述】：

<form>
  <input />
  <button
    onClick=e => 
      e.preventDefault();
      alert("clicked");
    
  >
    click
  </button>
</form>

如果我将onClick 处理程序移动到form's onSubmit，我将得到完全相同的行为。

我在 Google 上搜索的大多数答案都表明，区别在于 onClick 不会对通过 return 按键提交表单做出反应，但正如代码框示例中所见，情况并非如此。

除了处理 DOM 操作/事件模拟时，它们的行为何时会有所不同？

【问题讨论】：

因为它们在技术上是独立的事件。单击事件捕获鼠标单击事件。但是，有很多方法可以在不点击的情况下提交表单。从另一个 javascript 触发器，使用键盘返回等......所以它们是不同的。

如果有多个按钮或输入，onsubmit默认提交整个表单，onclick可以但用于更动态的东西，如滑出之类的东西，但它确实在你写的函数中。

【参考方案1】：

基本上，这取决于浏览器。当通过按回车键提交表单时，某些浏览器可能会调用提交按钮的onClick，但标准并没有强制要求这样做。其他人可能只在按下返回时调用onClick如果选择了提交按钮。除非手动单击按钮，否则其他人可能不会触发它。

如果您想要最佳的可移植性，请使用 onSubmit 来实现它的设计目的：检测表单提交。

【参考方案2】：

另一个主要区别是事件的目标。

Note that the submit event fires on the <form> element itself, and not on any <button> or <input type="submit"> inside it. (Forms are submitted, not buttons.)

https://developer.mozilla.org/en-US/docs/Web/API/htmlFormElement/submit_event