快捷導(dǎo)航

表單元素的submit()方法和onsubmit事件應(yīng)用概述

更新時(shí)間：2013年02月01日 09:16:00 作者：

表單元素?fù)碛衧ubmit方法，同時(shí)也具有onsubmit事件句柄，用于監(jiān)聽表單提交?？梢允褂胑lemForm.submit();方法觸發(fā)表單提交,感興趣的朋友可以了解下，或許對(duì)你有所幫助

表單元素?fù)碛衧ubmit方法，同時(shí)也具有onsubmit事件句柄，用于監(jiān)聽表單提交?？梢允褂胑lemForm.submit();方法觸發(fā)表單提交。
1、表單元素中出現(xiàn)了name="submit"的元素
這種情況下elemForm.submit();將不會(huì)觸發(fā)表單提交，因?yàn)楸韱卧嫉膕ubmit方法將會(huì)被覆蓋（formElem.submit就是對(duì)該元素的引用）。
2、elemForm.submit();不會(huì)觸發(fā)表單的onsubmit事件
沒有為什么，標(biāo)準(zhǔn)中就是這么規(guī)定的。
與此有些類似的是onfocus、onblur和focus()、blur()之間的關(guān)系卻不同，調(diào)用elem.blur()或elem.focus()卻會(huì)觸發(fā)onblur和onfocus事件。
這些為我們提供了一個(gè)思路，在設(shè)計(jì)一些UI組件時(shí)，需要考慮一些事件在內(nèi)部調(diào)用時(shí)是否要觸發(fā)相關(guān)事件。例如Dialog組件，它具有onopen事件，同時(shí)返回的對(duì)象也會(huì)有open()方法，我們這時(shí)就必須考慮下open()方法是否需要觸發(fā)onopen()事件。
3、動(dòng)態(tài)創(chuàng)建表單時(shí)遇到的問題
經(jīng)常使用的一種方法如下，他會(huì)在表單submit前調(diào)用，根據(jù)validate()函數(shù)的返回值決定是否需要提交表單。

復(fù)制代碼代碼如下:

然而，如果要?jiǎng)討B(tài)地為一個(gè)表單添加驗(yàn)證，即HTML代碼中沒有寫onsubmit，而在頁面加載后用javascript給這個(gè)form加一個(gè)handler，問題就來了。假設(shè)我們已經(jīng)得到了表單的DOM節(jié)點(diǎn)，保存在變量elemForm中，一般這樣來給它加上handler：

復(fù)制代碼代碼如下:

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);   
}  

問題就出現(xiàn)了：在Firefox和Chrome中"return false;"是不能阻止表單的提交的(在IE中可以)，這就是為什么大家在onsubmit屬性中要寫"return check()"，而不僅僅是"check()"。

原因是什么呢？請(qǐng)看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可以為元素綁定多個(gè)監(jiān)聽函數(shù)，某一個(gè)事件監(jiān)聽函數(shù)的返回值，不可以作為整個(gè)事件的返回值?？梢允褂孟旅娴姆椒ń鉀Q

復(fù)制代碼代碼如下:

function check(ev) {   
    ev = ev || window.event; // Event對(duì)象   
    if (ev.preventDefault) { // 標(biāo)準(zhǔn)瀏覽器   
        e.preventDefault();   
    } else { // IE瀏覽器   
        window.event.returnValue = false;   
    }   
}  

其實(shí)一切的根本都因?yàn)镮E不支持DOM Level 2。

您可能感興趣的文章: