如何在 JavaScript 中使表单提交事件监听器起作用？

Question

如何在 JavaScript 中使表单提交事件监听器起作用？

3

我正在用纯JavaScript替换一些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")
})

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

- user3628119

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Parsons · Accepted Answer

当你在 HTMLFormElement 上使用 .submit() 方法时，表单的提交事件侦听器不会被触发：

当用户点击提交按钮（或 <input type="submit">）或在编辑字段时按下 Enter 键（例如 <input type="text">）时，提交事件将被触发。直接调用 form.submit() 方法时，该事件不会发送到表单。

- MDN

相反，你可以使用 .requestSubmit() 方法，它会触发表单的 onsubmit 事件处理程序，并对表单执行约束验证：

const 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()具有较弱的浏览器支持，目前大约有89%的主流浏览器支持它。