Javascript 如何让表单提交事件侦听器在js中工作？

我用vanilla js替换了一些jquery代码，表单提交事件监听器出现了问题

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

---

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

在HTMLFormElement上使用

.submit（）

方法时，不会触发表单的提交事件侦听器：

当用户单击submit按钮时，将触发submit事件( 或

），或在编辑字段时按Enter键（例如。

）的格式。在以下情况下，事件不会发送到表单： 直接调用

form.submit（）

方法

-

您可以改为使用该方法，该方法会触发表单的onsubmit事件处理程序并在表单上执行：

/*香草js替代品*/
myForm=document.querySelector（“form[name=myForm]”）
myForm.querySelector（“按钮”）.addEventListener（“单击”，函数）（）{
myForm.requestSubmit（）；
})
myForm.addEventListener（'submit'，函数（e）{
e、 预防默认值（）
控制台日志（“提交表格”）；
})

点击我

哇，浏览器支持真的很差！这使它成为一个不可能的us@user3628119是的，这是不幸的：如果浏览器兼容性是一个问题，你可以考虑使用它。

/* 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")
})