javascript - 如何让表单提交事件监听器在 js 中工作？

Question

我正在用 vanilla js 替换一些 jquery 代码，我在使用表单提交事件监听器时遇到了问题

<!-- html -->
<form name="myForm">
   <input type="text" name="name" />
   <button type="button">Click me</button>
</form>

/* jquery code that works */
$myForm = $("form[name=myForm]")
$("form button").on("click", function(e){
   $myForm.submit()
})

$myForm.on("submit", function(e){
  e.preventDefault()
  console.log("Submitting form")  
})

/* vanilla js replacement */
myForm = document.querySelector("form[name=myForm]")
myForm.querySelector("button").addEventListener('click', function(){
   myForm.submit()
})

myForm.addEventListener('submit',function(e){
  e.preventDefault()
  console.log("Submitting form")
})

在 vanilla js 中，当以编程方式提交表单时，似乎不会触发表单提交事件监听器。我该如何解决这个问题？

Answer 1

当您使用 .submit() 时，不会触发表单的提交事件监听器HTMLFormElement 上的方法:

The submit event fires when the user clicks a submit button ( or <input type="submit">) or presses Enter while editing a field (e.g. <input type="text">) in a form. The event is not sent to the form when calling the form.submit() method directly.

- MDN

您可以使用 .requestSubmit() 方法，它会触发表单的 onsubmit 事件处理程序并执行 constraint validation在表格上:

/* vanilla js replacement */
myForm = document.querySelector("form[name=myForm]")
myForm.querySelector("button").addEventListener('click', function() {
  myForm.requestSubmit();
})

myForm.addEventListener('submit', function(e) {
  e.preventDefault()
  console.log("Submitting form");
})

<form name="myForm">
  <input type="text" name="name" />
  <button type="button">Click me</button>
</form>

此方法的主要缺点是，与 jQuery 的 .submit() 不同。方法，requestSubmit() 具有较弱的浏览器支持。