1

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

现在我正试图弄清楚这两种方法之间的关系并触发form元素onsubmit和onreset事件处理程序方法。

测试用例

所以考虑这个完全有效的 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>

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

(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();
    };
}());

现场演示

* 旁注：我知道它addEventListener可能比onevent处理程序更受欢迎，但是它具有相同的效果，这只是一个简单的、与 IE8 兼容的说明。

form单击相应的onsubmit和方法中的提交和重置按钮onreset就可以了，因为这些是必须触发事件处理程序的用户操作。

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

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

但是，单击.reset()按钮会向 发送onreset事件form，而.submit() 不会向 发送任何事件form。在 Chrome、Firefox 和 IE8 中测试。

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

问题

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

4

1 回答 1

4

由于历史原因，该.submit()方法不保证（并且通常不会）触发事件。onsubmit值得注意的是，现代浏览器（最新的 Chrome、Firefox、Opera、Safari 甚至 IE8 ）在onsubmit调用form.submit().

.reset()另一方面，该方法遵循规范并执行与单击重置按钮相同的操作，其中包括将onreset事件分派到表单。在与上述段落相同的浏览器中进行了测试。

参考

HTMLFormElement.submitMDN 页面：

从基于 Gecko 的应用程序调用此方法时，不会触发表单的onsubmit事件处理程序（例如， ）。onsubmit="return false;"一般来说，它不能保证被 HTML 用户代理调用。

DOM 2 级建议：

方法

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

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

[...]

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

W3C 邮件列表：

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

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

于 2013-07-13T03:22:36.653 回答