如何在JavaScript中捕获form.submit()事件？

Question

我使用JavaScript .submit()函数提交表单.

form.submit();

但是当我使用addEventListener捕获我的提交事件时,它将无法正常工作.

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

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

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

Answer 1

如果您不需要支持旧版浏览器（IE、Safari < 16），您可以使用requestSubmit().

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

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

或者，如果您有权访问提交按钮（我知道OP没有），btn.click()这是最好的支持方式，因为它将进行表单验证并触发submit事件。

Answer 2

据MDN称:

onsubmit="return false;"从基于Gecko的应用程序调用此方法时,不会触发表单的onsubmit事件处理程序(例如).通常,不保证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>