表單元素的submit()方法和onsubmit事件應(yīng)用概述
表單元素擁有submit方法,同時也具有onsubmit事件句柄,用于監(jiān)聽表單提交??梢允褂胑lemForm.submit();方法觸發(fā)表單提交。
1、表單元素中出現(xiàn)了name="submit"的元素
這種情況下elemForm.submit();將不會觸發(fā)表單提交,因為表單原始的submit方法將會被覆蓋(formElem.submit就是對該元素的引用)。
2、elemForm.submit();不會觸發(fā)表單的onsubmit事件
沒有為什么,標準中就是這么規(guī)定的。
與此有些類似的是onfocus、onblur和focus()、blur()之間的關(guān)系卻不同,調(diào)用elem.blur()或elem.focus()卻會觸發(fā)onblur和onfocus事件。
這些為我們提供了一個思路,在設(shè)計一些UI組件時,需要考慮一些事件在內(nèi)部調(diào)用時是否要觸發(fā)相關(guān)事件。例如Dialog組件,它具有onopen事件,同時返回的對象也會有open()方法,我們這時就必須考慮下open()方法是否需要觸發(fā)onopen()事件。
3、動態(tài)創(chuàng)建表單時遇到的問題
經(jīng)常使用的一種方法如下,他會在表單submit前調(diào)用,根據(jù)validate()函數(shù)的返回值決定是否需要提交表單。
<form onsubmit="return validate();"></form>
然而,如果要動態(tài)地為一個表單添加驗證,即HTML代碼中沒有寫onsubmit,而在頁面加載后用javascript給這個form加一個handler,問題就 來了。假設(shè)我們已經(jīng)得到了表單的DOM節(jié)點,保存在變量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);
}
問題就出現(xiàn)了:在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可以為元素綁定多個監(jiān)聽函數(shù),某一個事件監(jiān)聽函數(shù)的返回值,不可以作為整個事件的返回值??梢允褂孟旅娴姆椒ń鉀Q
function check(ev) {
ev = ev || window.event; // Event對象
if (ev.preventDefault) { // 標準瀏覽器
e.preventDefault();
} else { // IE瀏覽器
window.event.returnValue = false;
}
}
其實一切的根本都因為IE不支持DOM Level 2。
相關(guān)文章
javascript學習筆記(二) 鼠標經(jīng)過時,改變div塊的背景色的代碼
javascript學習筆記(二) 鼠標經(jīng)過時,改變div塊的背景色的實現(xiàn)代碼,當然也可以用css實現(xiàn)。2011-04-04BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--JavaScript篇
很多面試題是我自己面試BAT親身經(jīng)歷碰到的。整理分享出來希望更多的前端er共同進步吧,不僅適用于求職者,對于鞏固復(fù)習js更是大有裨益2014-10-10第一個JavaScript入門基礎(chǔ) document.write輸出
關(guān)于JavaScript,他是一個OOSP(面向?qū)ο竽_本語言)他是用來創(chuàng)建動態(tài)網(wǎng)站,增強用戶界面的一門技術(shù)。如果你想了解更多關(guān)于JavaScript的信息,請去維基百科查詢。2010-02-02javascript數(shù)組去重方法總結(jié)(推薦)
這篇文章主要介紹了javascript數(shù)組去重方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-03-03JavaScript中splice與slice的區(qū)別
本文給大家分享的是JavaScript中的splice和slice的用法和區(qū)別,slice()方法和splice()方法都是原生js中對數(shù)組操作的方法,下面我們來詳細探討下2017-05-05JavaScript中數(shù)組的合并以及排序?qū)崿F(xiàn)示例
這篇文章主要介紹了JavaScript中數(shù)組的合并以及排序?qū)崿F(xiàn)示例,是JavaScript入門學習中的基礎(chǔ)知識,需要的朋友可以參考下2015-10-10