为什么 form.submit() 不会触发“提交”事件？

Question

我正在使用 JavaScript .submit() 函数提交我的表单。

form.submit();

但是当我使用 addEventListener 来捕获我的提交事件时，它就不起作用了。

form.addEventListener("submit", function(event){
    //codes
});

我发现 addEvenetListener 函数只会监听 onsubmit 事件而不是提交。执行 form.submit() 时是否有任何替代解决方案来调用我的函数？

ps：出于某些原因，我需要继续使用 form.submit() 来提交我的表单，而不是使用提交按钮。

Answer 1

根据MDN：

从基于 Gecko 的应用程序调用此方法时，不会触发表单的 onsubmit 事件处理程序（例如，onsubmit="return false;"）。一般情况下，不保证会被 HTML 用户代理调用。

要解决此问题，请尝试使用dispatchEvent()：

var form = document.querySelector('form');

form.addEventListener('submit', function () {
  console.log('invoked');
  
  return false;
});

// form.submit();
form.dispatchEvent(new Event('submit'));

<form></form>

Answer 2

而不是使用这个然后将事件监听器添加到提交中

var form = $('form');
form.submit();
form.addEventListener("submit", function(event){
    //codes
});

你可以改用这个

var form = $('form');
form.submit(function(event){
    // Do something on submit
});

Answer 3

如果你不需要supportIE & Safari，你可以使用requestSubmit()。

与@Patrick Roberts 的dispatchEvent() 解决方案不同，这也将验证表单的内容！根据MDN：

submit() 提交表单，但仅此而已。另一方面，requestSubmit() 就像单击了提交按钮一样。表单的内容经过验证，只有在验证成功时才会提交表单。提交表单后，提交事件将发送回表单对象。

或者，如果您可以访问提交按钮（我知道 OP 没有），btn.click() 是自它将进行表单验证以及触发submit 事件。

Answer 4

让事件处理程序监听按钮点击，然后在回调中调用form.submit()。

Answer 5

我认为这个解决方案会比您正在尝试的解决方案更有用。可能有一些语法错误。

HTML：

<button onclick="formSubmit()"> Submit form</button>

JavaScript：

function formSubmit()
{
   var form = document.getElementById('formName');
   form[0].submit();
}