不使用element.submit()的addEventListenter

Question

为什么事件提交不起作用，而$('form').submit()在起作用？

但当在输入字段中按enter键时，它可以正常工作

​

document.getElementById("mform1").addEventListener('submit', function(e) {
  e.preventDefault()
  alert('123')
});

<form id="mform1" name="mform1" enctype="multipart/form-data" method="post">
  <input type="text">
</form>

​

Answer 1

只有当用户提交表单时，提交事件才会触发。当JavaScript提交它时，它永远不会触发。

您可以通过显式触发事件来伪造它：

​

document.getElementById("mform1").addEventListener('submit', function(e) {
  e.preventDefault()
  alert('123')
});

var fake_submit = new Event("submit");
document.getElementById("mform1").dispatchEvent(fake_submit);

<form id="mform1" name="mform1" enctype="multipart/form-data" method="post">
  <input type="text">
</form>

​

Answer 2

仅使用jQuery：

​

$( "#mform1" ).submit( function( e ) {
    e.preventDefault();
    alert( "123" );
} );

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<form id="mform1" name="mform1" enctype="multipart/form-data" method="post">
  <input type="text">
</form>

​