為什么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
}