javascript - 为什么 form.reset() 在重置处理程序中不起作用？

Question

document.forms[0].addEventListener("reset", resetHandler, false);

function resetHandler (evt)
{
    evt.preventDefault();
    document.forms[0].reset();  // this does nothing
}

在此示例中，reset() 没有任何效果(已在 Firefox 和 Chrome 中测试)。
与预期的“提交”事件完全相同。
为什么？

fiddle :http://jsfiddle.net/wcLLtkaL/

Answer 1

HTML spec说:

When a form element form is reset, the user agent must fire a simple event named reset, that bubbles and is cancelable, at form, and then, if that event is not canceled, must invoke the reset algorithm of each resettable element whose form owner is form.

When the reset algorithm is invoked by the reset() method, the reset event fired by the reset algorithm must not be trusted.

这正是按下按钮或调用 f.reset() 时发生的情况:创建了一个事件。但是由于您取消了事件 (evt.preventDefault())，因此不会执行“每个可重置元素的重置算法”步骤。

这看起来应该进入无限循环(reset() 方法触发 reset 事件，该事件调用 reset() 方法触发器...)，然而，there seem to be additional steps taken to prevent that .

您可以通过将调用移到方法之外轻松验证 f.reset() 是否触发了 reset 事件:

document.forms[0].addEventListener("reset", resetHandler, false);

function resetHandler (evt)
{
    console.log('reset');
    evt.preventDefault();
}

document.forms[0].reset();

这将记录 “reset”，表明所有 .reset() 所做的都是触发事件。并且仅当事件未取消时，表格才会真正重置。

---

但是为什么 submit() 的行为不同呢？

Calling the submit() method实际上不会触发 submit 事件，因此不会取消要采取的操作。