Question

我遇到的问题是，如果表单是通过Javascript提交的，我不知道为什么无法限制提交事件。

代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <form id="formA">
        <input type="text" id="name" value="test"/>
        <input type="button" id="btn" value="submit by js"/>
        <input type="submit" id="btn2" value="submit directly"/> <!-- event can be triggered -->
    </form>
</body>
<script type="text/javascript">
    document.getElementById("formA").addEventListener("submit", function() {
        console.log("form is submitted"); // no effect if submitting by js. WHY?
    });
    document.getElementById("btn").addEventListener("click", function() {
        document.getElementById("formA").submit();
    });
</script>
</html>

Answer 1

您可以在按钮点击时应用技巧捕获提交事件，当按钮客户端可以在submit上添加点击事件时，它也可以与您想要的相同

  document.getElementById("formA").addEventListener("submit", function() {
    alert("form is submitted"); // no effect if submitting by js. WHY?
  });
  document.getElementById("btn").addEventListener("click", function() {
    document.getElementById("btn2").click();
  });

<form id="formA" name="formA" action="#">
  <input type="text" id="name" value="test" />
  <input type="button" id="btn" value="submit by js" />
  <input type="submit" id="btn2" value="submit directly" />
  <!-- event can be triggered -->
</form>

Answer 2

我相信这是正确答案：

表格的预期行为：

submit方法不会调用onsubmit事件处理程序。

参考：Microsoft - Event handler parameters

换句话说，当以编程方式提交表单时，不会触发onsubmit事件。它仅在单击提交按钮时触发。这是我在测试OP代码时观察到的。

OP还会向控制台输出一条消息，以测试是否已提交表单。但是，需要启用控制台持久性才能看到此消息。如果未启用，则在提交表单时将清除控制台日志（使其看起来没有打印消息）。

document.getElementById("formA").addEventListener("submit", function() {
    console.log("form is submitted"); 
});

提交通过javascript提交时未捕获的事件

2 个答案: