爲什麼form.reset（）不能從重置處理函數中工作？

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

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

在本例中，reset()沒有效果（在Firefox和Chrome中測試過）。
「提交」事件的預期效果完全相同。
爲什麼？爲什麼form.reset（）不能從重置處理函數中工作？

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

來源

2015-09-17 Zilk

PS，我完全知道這個例子中的代碼本身並不是很有用:) – Zilk

這是奇怪的，但是你需要它嗎？在重置發生之前，JavaScript應該執行，所以除非你做了任何需要返回的異步，否則不需要。 –

@ jesse-kernaghan：我注意到問題的原始處理程序具有其他功能。根據情況，它可能會用「智能」默認值替換值，或執行實際的重置。解決方法是將'preventDefault（）'移動到執行自定義重置的分支，但問題仍然存在，爲什麼甚至有必要。 – Zilk

的HTML spec說：

當表單元素表單被重置，用戶代理必須，如果火命名重置一個簡單的事件，氣泡，是取消，在窗體，然後事件沒有被取消，必須調用表單所有者形式的每個可重置元素的重置算法。

當通過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事件，因此要採取的操作未取消。

來源

2015-09-17 18:14:48

比我的答案好得多的細節，很好的工作 – t1nr2y

一個非常好的和詳細的解釋，謝謝。但是，指定什麼是奇怪的事情。我認爲這與保持與現有瀏覽器行爲向後兼容的原因或設計有關。 – Zilk

@Zilk：可能。當然，我也可能錯誤地解釋規範，所以我鼓勵你也讀一下:) –

的「evt.preventDefault（）;」正在阻止「重置」的默認操作。 Updated fiddle與「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 
}

來源

2015-09-17 18:12:40 t1nr2y

爲什麼form.reset（）不能從重置處理函數中工作？

回答

相關問題