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

Question

我正在用普通的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

当您在 HTMLForm 元素上使用该方法时，不会触发表单的提交事件侦听器：.submit()

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

- 断续器

您可以改用 .requestSubmit（） 方法，该方法会触发表单的 onsubmit 事件处理程序，并对表单执行约束验证：

/* 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()