为什么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中测试）。
完全相同的事情与“提交”事件的预期一致。
为什么？

小提琴： http ： //jsfiddle.net/wcLLtkaL/

Answer 1

HTML规范说：

重置表单元素表单时，用户代理必须在表单上触发一个名为reset的简单事件，即冒泡并且可以取消，然后，如果该事件未被取消，则必须调用其表单所有者的每个resettable元素的重置算法是形式。

当reset()方法调用重置算法时，重置算法触发的重置事件不得信任。

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

这看起来应该进入无限循环（ reset()方法触发reset事件，它使用触发器调用reset()方法...），但是， 似乎还有其他步骤来防止这种情况 。

您可以通过在方法外移动调用来轻松验证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()表现不同？

调用submit()方法实际上不会触发submit事件，因此不会取消要执行的操作。

Answer 2

“evt.preventDefault（）;” 正在阻止“重置”的默认操作。 更新了“evt.preventDefault（）;” 注释掉，显示它正常工作。

var f = document.forms[0];

f.addEventListener("reset", resetHandler, false);
f.addEventListener("submit", submitHandler, false);

function resetHandler (evt)
{
    //evt.preventDefault();
    f.reset();  // this does nothing
}

function submitHandler (evt)
{
    evt.preventDefault();
    f.submit();  // this works fine
}