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 spec说：

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

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

这正是按下按钮或调用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事件，因此不会取消要采取的操作。

Answer 2

＆＃34; evt.preventDefault（）;＆＃34;阻止＆＃34;重置＆＃34;的默认操作。 Updated fiddle与＆＃34; evt.preventDefault（）;＆＃34;注释掉，显示它正常工作。

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
}

为什么form.reset（）无法通过重置处理程序工作？

2 个答案: