表單元素的submit()方法和onsubmit事件

 

• 一、表單元素中出現了name="submit"的元素
• 二、elemForm.submit();不會觸發表單的onsubmit事件
• 三、動態建立表單時遇到的問題

表單元素擁有submit方法，同時也具備onsubmit事件句柄，用於監聽表單提交。可使用elemForm.submit();方法觸發表單提交。

一、表單元素中出現了name="submit"的元素

這種狀況下elemForm.submit();將不會觸發表單提交，由於表單原始的submit方法將會被覆蓋（formElem.submit就是對該元素的引用）。

二、elemForm.submit();不會觸發表單的onsubmit事件

沒有爲何，標準中就是這麼規定的。

與此有些相似的是onfocus、onblur和focus()、blur()之間的關係卻不一樣，調用elem.blur()或elem.focus()卻會觸發onblur和onfocus事件。

這些爲咱們提供了一個思路，在設計一些UI組件時，須要考慮一些事件在內部調用時是否要觸發相關事件。 例如Dialog組件，它具備onopen事件，同時返回的對象也會有open()方法，咱們這時就必須考慮下open()方法是否須要觸發onopen()事件。

三、動態建立表單時遇到的問題

常常使用的一種方法以下，他會在表單submit前調用，根據validate()函數的返回值決定是否須要提交表單。

<form onsubmit="return validate();"></form>

然而，若是要動態地爲一個表單添加驗證，即HTML代碼中沒有寫onsubmit，而在頁面加載後用javascript給這個form加一個handler，問題就 來了。假設咱們已經獲得了表單的DOM節點，保存在變量elemForm中，通常這樣來給它加上handler：

var check = function() {
    if ('OK') {
        return true;
    } else {
        return false;
    }
};
if (elemForm.addEventListener) {
    elemForm.addEventListener("submit", check, false);
} else if (elemForm.attachEvent) {
    elemForm.attachEvent("onsubmit", check);
}

問題就出現了：在Firefox和Chrome中"return false;"是不能阻止表單的提交的(在IE中能夠)，這就是爲何你們在onsubmit屬性中要寫"return check()"，而不單單是"check()"。

緣由是什麼呢？請看ECMAScript Language Binding，其中明確地寫着，"Object EventListener: This is an ECMAScript function reference. This method has no return value. The parameter is a Event object"，意思就是event listener沒有返回值。 換一種理解，addEventListener能夠爲元素綁定多個監聽函數，某一個事件監聽函數的返回值，不能夠做爲整個事件的返回值。可使用下面的方法解決

function check(ev) {
    ev = ev || window.event; // Event對象
    if (ev.preventDefault) { // 標準瀏覽器
        e.preventDefault();
    } else { // IE瀏覽器
        window.event.returnValue = false;
    }
}

其實一切的根本都由於IE不支持DOM Level 2。