我怎么知道是什么导致了表单提交？

Question

<form name="myForm" id="a" action="/action_page.php"  method="post">
  Name: <input type="email" name="fname">
  

</form>
<button type="submit" form="a"  >submits</button>
<script>
const form=document.querySelector('form');

form.addEventListener('submit',function(e){
    e.preventDefault();
    console.log('a',e.currentTarget);
  console.log(e.target);  
},true);
</script>

e.target 是 'form' 本身点击按钮而根据我的理解应该是按钮。

我检查了其他事件，如无效和点击，它工作得很好。是因为某些提交者吗？

Answer 1

您没有收听 button 的 click 事件，您正在收听 form 的 submit 事件，这就是为什么您会看到form 作为 target 的 Event。

提交事件不一定在提交按钮点击时触发，它也可以通过在表单输入字段中按下 ↲ 来触发（但不是在程序提交上：参见HTMLFormElement.submit())

幸运的是，导致表单提交的原因在 SubmitEvent.submitter 属性:

document.querySelector('form').addEventListener('submit', e => {
    console.log(e.submitter);
    e.preventDefault();
});

<form>
    <input placeholder="Type Enter here!">
    <button>Submit</button>
    <button>Just another submit button</button>
</form>

我怎么知道是什么导致了表单提交？

How do I know what caused a form submission?

javascript

dom-events