如何让表单提交事件侦听器在 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()-&nbsp;断续器您可以改用&nbsp;.requestSubmit（）&nbsp;方法，该方法会触发表单的 onsubmit 事件处理程序，并对表单执行约束验证：/* vanilla js replacement */myForm = document.querySelector("form[name=myForm]")myForm.querySelector("button").addEventListener('click', function() {&nbsp; myForm.requestSubmit();})myForm.addEventListener('submit', function(e) {&nbsp; e.preventDefault()&nbsp; console.log("Submitting form");})<form name="myForm">&nbsp; <input type="text" name="name" />&nbsp; <button type="button">Click me</button></form>此方法的主要缺点是，与 jQuery 的方法不同，请求提交（） 的浏览器支持较弱。.submit()