HTMLFormElement 提交和重置方法与事件处理程序的关系-解网

问：

HTMLFormElement DOM 接口提供了 and 方法，我在单页应用程序中大量使用了这些方法。.submit().reset()

现在，我正在尝试弄清楚这两个方法之间的关系，并触发元素和事件处理程序方法。formonsubmitonreset

测试用例

因此，考虑到这个完全有效的 HTML5 文档：

<!DOCTYPE html>
<title>HTMLFormElement method-event relation test page</title>
<form style="border:solid">
  <input name=foo>
  <button>Submit</button>
  <button type=reset>Reset</button>
</form>
<button id=js-submit>.submit()</button>
<button id=js-reset>.reset()</button>

表单下方的以下 JS 内容：<script>

(function() {
    var qs = function(s) {
            return document.querySelector(s);
        },
        form = qs('form');
    form.onsubmit = function(e) {
        console.log('onsubmit fired');
        return false;
    };
    form.onreset = function(e) {
        console.log('onreset fired');
        return false;
    };
    qs('#js-submit').onclick = function() {
        form.submit();
    };
    qs('#js-reset').onclick = function() {
        form.reset();
    };
}());

现场演示

* 旁注：我知道可能比处理程序更受欢迎，但它会产生相同的效果，这只是一个简单的、兼容 IE8 的插图。addEventListeneronevent

单击“提交”和“重置”按钮内会触发相应的方法，因为这些是用户操作，因此必须触发事件处理程序。formonsubmitonreset

窗体外部的按钮调用元素和方法，即我在实际代码中以编程方式调用的方法。form.submit().reset()

通常，当我以编程方式从代码端调用简单方法时，我希望这些方法不会触发任何表单事件。form

但是，单击该按钮会将事件分派给，而不会将任何事件分派给。在 Chrome、Firefox 和 IE8 中进行了测试。.reset()onresetform.submit()form

* 使用而不是处理程序时的行为是相同的。addEventListeneron*

问题

对于在调用 's 和方法时是否触发事件处理程序，是否有标准的预期行为？form.submit().reset()

JavaScript 表单 DOM

参考

HTMLFormElement.submit MDN 页面：

从以下位置调用此方法时，不会触发窗体的事件处理程序（例如，）基于 Gecko 的应用程序。一般来说，它不保证是由 HTML 用户代理调用。onsubmitonsubmit="return false;"

DOM 级别 2 建议：

方法

reset
恢复表单元素的默认值。它执行与重置按钮相同的操作。

submit
提交表单。它执行与提交按钮相同的操作。

[...]

注意：调用此方法时，不保证会触发 onsubmit 偶数处理程序。由于历史原因，这种行为是不一致的，作者不应该依赖特定的行为。

W3C 邮件列表：

提交提交表单。它执行与提交按钮相同的操作。

我认为最后一句话不正确。使用提交输入将触发 onsubmit。提交方法不会。

@bfavaretto 谢谢。我在这个项目中使用了 jQuery，但真正让我感兴趣的是一个香草（在我的 ajax 提交成功回调中），它确实触发了给定表单的事件，而我没想到它会触发。它还提醒我，在许多情况下，我使用了不触发处理程序的香草（例如，我已经回答了这个相关问题，并且在测试服务器端验证时，我也从控制台使用它来绕过 JS 验证），所以我想找到一个明确的规范，说明它们如何/为什么以这种方式工作。form.reset()onresetform.submit()=]

1赞 bfavaretto 7/13/2013

是的，这就是我所说的痛苦，强迫症...... :)

0赞 siux 8/11/2022 #2

被接受的答案在 2022 年仍然有效。我只是想补充一点，今天浏览器之间仍然存在不一致之处。例如，如果你在表单元素上调度一个名为 reset 的自定义事件，chrome 会忽略它，但 firefox 实际上会重置表单，就像你调用 form.reset（）或点击重置按钮一样。

上一个：将规则重写为新 URL，并在内部重写为旧 URL

下一个：适当的缓存标头，以确保PHP页面始终被重新获取

HTMLFormElement 提交和重置方法与事件处理程序的关系

HTMLFormElement submit and reset methods relation with event handlers

测试用例

问题

评论

参考

方法

评论