测试用例

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

Live demo

*旁注：我知道addEventListener可能优于onevent处理程序，但它具有相同的效果，这只是一个简单的IE8兼容插图。

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

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

通常情况下，由于我是以编程方式从代码端调用简单form方法，因此我希望这些方法不会触发任何表单事件。

但，点击.reset()按钮会向onreset发送form个事件，同时.submit() 不将任何事件发送给form。在Chrome，Firefox和IE8中测试过。

*使用addEventListener代替on*处理程序时，行为相同。

问题

在调用form的{{1}}和.submit()方法时，是否会触发事件处理程序的标准预期行为？

Answer 1

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

另一方面，.reset()方法跟在spec之后，并执行与单击重置按钮相同的操作，其中包括将onreset事件分派给表单。在与上面段落相同的浏览器中进行测试。

参考

HTMLFormElement.submit MDN page：

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

DOM Level 2 Recommendation：

方法

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

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

[...]

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

W3C mailing list：



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


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

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

测试用例

问题

1 个答案:

参考

方法