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

hongshatang 2011-04-25

展開全文

javascript表單事件匯總

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

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

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

代碼

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>

大家判斷像上面的寫法，點擊submit按鈕該表單是否提交？

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

若答案為否，錯了。實際情況是表單正常提交，若想它不提交，應該將

代碼

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();">

為何？

原來onsubmit屬性就像是<form>這個html對象的一個方法名，其值（一字符串）就是其方法體，默認返回true；

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

代碼

Java代碼

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

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

就相當于

代碼

Java代碼

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

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

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

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

代碼

Java代碼

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

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

這樣寫，override方法的效果為：

代碼

Java代碼

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

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

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

代碼

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

這樣，我們利用到了它的返回值，達到了預期效果。
這樣理解的話我想印象會深刻得多，就不易出錯了

結論：
我們可以用Java里的思維方式來思考模擬JavaScript中的類似情況（JavaScript中基于prototype的面向對象技術也確實是這樣做的），但他們畢竟還是有本質上的區(qū)別，如Java是強類型的，有嚴格的語法限制，而JavaScript是松散型的。象上述方法：

代碼

Java代碼

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

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

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

二：
FORM onSubmit="return false"的作用
比如一個頁面里有兩個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>

兩個form里分別有一個type為submit的按扭

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

三：輸入關鍵字后才可提交查詢，否則重新輸入

Java代碼

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

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

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

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

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

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

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

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

如果這樣寫,那么將會只有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í)行順序為method3->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í)行順序為method1->method2->method3

看看gmail的代碼