由表單中onsubmit="return false;"想到的

hongshatang 2011-04-25

展開(kāi)全文

javascript表單事件匯總

1. onabort（ns3，ns4，ie4）：當(dāng)用戶(hù)終止正在打開(kāi)的網(wǎng)頁(yè)時(shí)產(chǎn)生該事件。
2. onblur（ns3，ns4，ie3，ie4）：某元素失去活動(dòng)焦點(diǎn)時(shí)產(chǎn)生該事件。例如鼠標(biāo)在文本框中點(diǎn)擊后又在文本框外點(diǎn)擊時(shí)就會(huì)產(chǎn)生。
3. onchange（ns3，ns4，ie3，ie4）：當(dāng)網(wǎng)頁(yè)上某元素的內(nèi)容發(fā)生改變時(shí)產(chǎn)生。例如在文本框中輸入文本后又在文本框外點(diǎn)擊時(shí)就會(huì)產(chǎn)生。
4. onclick（ns3，ns4，ie3，ie4）單擊網(wǎng)頁(yè)上的某元素時(shí)產(chǎn)生
5. ondblclick（ns4，ie4）：雙擊網(wǎng)頁(yè)上的元素時(shí)產(chǎn)生
6. onerror（ns3，ns4，ie4）：瀏覽器在打開(kāi)網(wǎng)頁(yè)的過(guò)程中發(fā)生錯(cuò)誤時(shí)產(chǎn)生該事件
7. onfinish（ie4）：滾動(dòng)文本條中的文本完成一次滾動(dòng)時(shí)產(chǎn)生的事件
8. onfocus（ns3，ns4，ie3，ie4）網(wǎng)頁(yè)上的元素獲得焦點(diǎn)時(shí)產(chǎn)生該事件
9. onkeydown（ns4，ie4）按下任意鍵時(shí)產(chǎn)生該事件
10. onkeypress（ns4，ie4）按下任意鍵時(shí)并釋放該鍵產(chǎn)生的事件
11. onkeyup（ns4，ie4）釋放按下的按鍵產(chǎn)生該事件
12. onload（ns3、4，ie3、4）網(wǎng)頁(yè)或圖象調(diào)入完成后產(chǎn)生該事件
13. onmousedown（ns4，ie4）在網(wǎng)頁(yè)的某元素上按下鼠標(biāo)時(shí)產(chǎn)生該事件
14. onmousemove（ie3、4）在網(wǎng)頁(yè)的某元素上移動(dòng)鼠標(biāo)時(shí)產(chǎn)生該事件
15. onmouseout（ns3、4，ie4）從網(wǎng)頁(yè)的某元素移出鼠標(biāo)時(shí)產(chǎn)生該事件
16. onmouseover（ns3、4，ie3、4）鼠標(biāo)移入網(wǎng)頁(yè)的某元素時(shí)產(chǎn)生該事件
17. onmouseup（ns4，ie4）釋放按下的鼠標(biāo)時(shí)產(chǎn)生該事件
18. onreset（ns3、4，ie3、4）復(fù)位表格時(shí)產(chǎn)生該事件
19. onresize（ns4，ie4）改變?yōu)g覽器時(shí)產(chǎn)生該事件
20. onselect（ns3、4，ie3、4）選擇文本框中的文本時(shí)產(chǎn)生該事件
21. onstart（ie4）滾動(dòng)文本條中的文本開(kāi)始滾動(dòng)時(shí)產(chǎn)生該事件
22. onsubmit（ns3、4，ie3、4）提交表單時(shí)產(chǎn)生該事件
23. onunload（ns3、4，ie3、4）從當(dāng)前的網(wǎng)頁(yè)退出時(shí)產(chǎn)生該事件

由表單中onsubmit="return false;"想到的

一：
由表單中onsubmit="return false;"想到的
眾所周知，在表單中加上onsubmit="return false;"可以阻止表單提交。
下面是簡(jiǎn)單的一小段代碼：

代碼

Java代碼

<form action="index.jsp" method="post" onsubmit="submitTest();">
<INPUT value="www">
<input type="submit" value="submit">
</form>
<SCRIPT LANGUAGE="JavaScript">
<!--
function submitTest() {
// 一些邏輯判斷
return false;
}
//-->
</SCRIPT>

 <form action="index.jsp" method="post" onsubmit="submitTest();">
    <INPUT value="www">
    <input type="submit" value="submit">
</form>
 
<SCRIPT LANGUAGE="JavaScript">
<!--
    function submitTest() {
        // 一些邏輯判斷
     return false;
    }
//-->
</SCRIPT>

大家判斷像上面的寫(xiě)法，點(diǎn)擊submit按鈕該表單是否提交？

若答案為是，就不用往下看了。

若答案為否，錯(cuò)了。實(shí)際情況是表單正常提交，若想它不提交，應(yīng)該將

代碼

Java代碼

<form action="index.jsp" method="post" onsubmit="submitTest();">

 <form action="index.jsp" method="post" onsubmit="submitTest();">

改為

代碼

Java代碼

<form action="index.jsp" method="post" onsubmit="return submitTest();">

 <form action="index.jsp" method="post" onsubmit="return submitTest();">

為何？

原來(lái)onsubmit屬性就像是<form>這個(gè)html對(duì)象的一個(gè)方法名，其值（一字符串）就是其方法體，默認(rèn)返回true；

和Java一樣，在該方法體中你可以寫(xiě)任意多個(gè)語(yǔ)句，包括內(nèi)置函數(shù)和自定義函數(shù)，如

代碼

Java代碼

onsubmit="
alert('haha'); // 內(nèi)置函數(shù)
submitTest(); // 自定義函數(shù)
alert(this.tagName); // 用到了this關(guān)鍵詞
......(任意多條語(yǔ)句)
return false;
"

 onsubmit="
    alert('haha'); // 內(nèi)置函數(shù)
    submitTest();  // 自定義函數(shù)
    alert(this.tagName); // 用到了this關(guān)鍵詞
    ......(任意多條語(yǔ)句)
    return false;
"

就相當(dāng)于

代碼

Java代碼

Form.prototype.onsubmit = function() {
alert('haha'); // 內(nèi)置函數(shù)
submitTest(); // 自定義函數(shù)
alert(this.tagName); // 用到了this關(guān)鍵詞
......(任意多條語(yǔ)句)
return false;
};

 Form.prototype.onsubmit = function() {
    alert('haha'); // 內(nèi)置函數(shù)
    submitTest();  // 自定義函數(shù)
    alert(this.tagName); // 用到了this關(guān)鍵詞
    ......(任意多條語(yǔ)句)
    return false;
};

這樣的話你就覆寫(xiě)了(override)其默認(rèn)方法（默認(rèn)返回true）
大家注意到方法體中可以用this這個(gè)關(guān)鍵詞，這里即代表了<form>的對(duì)象實(shí)例。

經(jīng)過(guò)這樣的分析后，以上情況就不難理解了：

代碼

Java代碼

<form action="index.jsp" method="post" onsubmit="submitTest();">

 <form action="index.jsp" method="post" onsubmit="submitTest();">

這樣寫(xiě)，override方法的效果為：

代碼

Java代碼

Form.prototype.onsubmit = function() {
submitTest();
};

 Form.prototype.onsubmit = function() {
    submitTest();
};

在這里submitTest()雖然返回false，但我們只執(zhí)行了此函數(shù)，沒(méi)有對(duì)其結(jié)果進(jìn)行任何處理。而

代碼

Java代碼

<form action="index.jsp" method="post" onsubmit="return submitTest();">

 <form action="index.jsp" method="post" onsubmit="return submitTest();">

override方法的效果為：

代碼

Java代碼

Form.prototype.onsubmit = function() {
return submitTest();
};

 Form.prototype.onsubmit = function() {
    return submitTest();
};

這樣，我們利用到了它的返回值，達(dá)到了預(yù)期效果。
這樣理解的話我想印象會(huì)深刻得多，就不易出錯(cuò)了

結(jié)論：
我們可以用Java里的思維方式來(lái)思考模擬JavaScript中的類(lèi)似情況（JavaScript中基于prototype的面向?qū)ο蠹夹g(shù)也確實(shí)是這樣做的），但他們畢竟還是有本質(zhì)上的區(qū)別，如Java是強(qiáng)類(lèi)型的，有嚴(yán)格的語(yǔ)法限制，而JavaScript是松散型的。象上述方法：

代碼

Java代碼

Form.prototype.onsubmit = function() {
};

Form.prototype.onsubmit = function() {
};

既可以有返回值，又可以沒(méi)有返回值，在Java里是通不過(guò)的，畢竟Java里面不能靠方法的返回值不同來(lái)重載(overload)方法，而JavaScript中的重載要松散得多。

二：
FORM onSubmit="return false"的作用
比如一個(gè)頁(yè)面里有兩個(gè)form，如下：

Java代碼

<form id="form1" name="form1" method="post" action="http://127.0.0.1/">
<input type="submit" name="Submit2" value="提交表單" />
</form>
<form name="form2" onsubmit="return false">
input name="" type="submit" value="提交" onclick="bian()" />
</form>

<form id="form1" name="form1" method="post" action="http://127.0.0.1/">
  <input type="submit" name="Submit2" value="提交表單" />
</form>


<form name="form2"  onsubmit="return false">
input name="" type="submit" value="提交" onclick="bian()" />
</form>

兩個(gè)form里分別有一個(gè)type為submit的按扭

如果想按第二個(gè)按鈕不想提交表單，只想執(zhí)行bian()方法時(shí)，如果不用onsubmit="return false">就達(dá)不到效果，就會(huì)提交表單了！
而加上后就可以了??！

三：輸入關(guān)鍵字后才可提交查詢(xún)，否則重新輸入

Java代碼

<script language="javascript">
function checkfrom(){
if(document.form1.keyword.value==""){
alert("請(qǐng)您輸入關(guān)鍵字!");
document.form1.keyword.focus();
return false;
}
return true;
}
</script>
<form name="form1" onsubmit="return checkfrom();" action="del.do" method=post id="form1">
關(guān)鍵字：<input type="text" name="keyword" id="keyword">
<input type="submit" value="Submit">
</form>

submit() 和 onsubmit() 的區(qū)別

在日常的開(kāi)發(fā)中，往往在表單被提交之前需要加上驗(yàn)證（驗(yàn)證日期格式是否正確，驗(yàn)證某個(gè)input是否為空…），首先想到的就是 onsubmit事件，在一個(gè)submit類(lèi)型按鈕點(diǎn)擊時(shí)，首先觸發(fā)的就是form的onsubmit()事件。這時(shí)，我們就可以寫(xiě)上自己的驗(yàn)證。代碼如下：

但是如果我們直接調(diào)用form的submit()事件，卻不會(huì)執(zhí)行onsubmit()，代碼如下：

我們?nèi)绻胝{(diào)用form的onsubmit事件只能通過(guò)調(diào)用，只有這樣，才能執(zhí)行這個(gè)事件:

但是這樣就失去了submit功效。也許我們可以用（attachEvent() / addEventListener() ）模擬觸發(fā)器的方式實(shí)現(xiàn)，語(yǔ)法如下(下面部分是轉(zhuǎn)載內(nèi)容……)：

有時(shí)候當(dāng)某一對(duì)象的某一事件被觸發(fā)時(shí)，它所要執(zhí)行的程序可能是一大串，有可能是要呼叫某一函數(shù)，也有可能同時(shí)又要呼叫另一函數(shù)。

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;

如果這樣寫(xiě),那么將會(huì)只有medhot3被執(zhí)行
在IE中使用addachEvent ,

var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

執(zhí)行順序?yàn)閙ethod3->method2->method1

Mozilla系列中需要使用 addEventListener

var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

執(zhí)行順序?yàn)閙ethod1->method2->method3

看看gmail的代碼

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： hongshatang > 《我的圖書(shū)館》

舉報(bào)/認(rèn)領(lǐng)