表單元素的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()函數的返回值決定是否需要提交表單。

<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。

轉自:http://www.cnblogs.com/rainman/archive/2011/09/05/2168162.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM