表單元素的submit()方法和onsubmit事件應用概述_基礎知識

表單元素擁有submit方法，同時也具有onsubmit事件句柄，用於監聽表單提交。可以使用elemForm.submit();方法觸發表單提交。
1、表單元素中出現了name="submit"的元素
這種情況下elemForm.submit();將不會觸發表單提交，因為表單原始的submit方法將會被覆蓋（formElem.submit就是對該元素的引用）。
2、elemForm.submit();不會觸發表單的onsubmit事件
沒有為什麼，標準中就是這麼規定的。
與此有些類似的是onfocus、onblur和focus()、blur()之間的關係卻不同，調用elem.blur()或elem.focus()卻會觸發onblur和onfocus事件。
這些為我們提供了一個思路，在設計一些UI元件時，需要考慮一些事件在內部呼叫時是否要觸發相關事件。例如Dialog元件，它有onopen事件，同時傳回的物件也會有open()方法，我們這時就必須考慮下open()方法是否需要觸發onopen()事件。
3、動態建立表單時遇到的問題
經常使用的一種方法如下，他會在表單submit前調用，根據validate()函數的回傳值決定是否需要提交表單。

複製程式碼 程式碼如下:

validate()">

 

然而，如果要動態地為一個表單添加驗證，即HTML程式碼中沒有寫onsubmit，而在頁面載入後用javascript給這個form加一個handler，問題就來了。假設我們已經得到了表單的DOM節點，保存在變數elemForm中，一般這樣來給它加上handler：

複製程式碼

複製程式碼

程式碼如下:


var check = function() {  
    if ('OK') {  
         return false;  
    }  
};  
if (elemForm.addEventListener) {  
    elemForm.addEventListener("submit", check, false); 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
    ev = ev || window.event; // Event對象  
    if (ev.preventDefault) { // 標準瀏覽器  
  器  
        window.event.returnValue = false;  
    }  
}