submitとonsubmitの違い

5814 ワード

フォームのonsubmit=「return false;」から考えられる
フォームにonsubmit=「return false;」を付けると、フォームのコミットがブロックされることはよく知られています.
簡単なコードを次に示します.
コード#コード#
 <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ボタンをクリックしてフォームを提出しますか?
 
答えがそうなら、下を見る必要はありません.
答えが否なら、間違っています.フォームが正常にコミットされている場合は、コミットしない場合は、
コード#コード#
 

に改心
コード#コード#
 
 
どうして?
元のonsubmitプロパティはというhtmlオブジェクトのメソッド名のようなもので、その値(文字列)はメソッド体であり、デフォルトではtrueを返します.
Javaと同様に、このメソッドボディでは、組み込み関数やカスタム関数など、任意の複数の文を書くことができます.
コード#コード#
 onsubmit="
 
    alert('haha');//内蔵関数
 
    submitTest(); //カスタム関数
 
    alert(this.tagName);//thisキーワードを使った
 
    ......(任意の複数の文)
 
    return false;
 

 
に相当
コード#コード#
 Form.prototype.onsubmit = function() {
 
    alert('haha');//内蔵関数
 
    submitTest(); //カスタム関数
 
    alert(this.tagName);//thisキーワードを使った
 
    ......(任意の複数の文)
 
    return false;
 
};
 
これでデフォルトメソッドを上書き(override)します(デフォルトはtrueを返します)
メソッド体ではthisというキーワードを用いることができ,ここではのオブジェクトインスタンスを表す.
 
このような分析を経て、以上の状況は理解しにくくなりました.
コード#コード#
 
このように書くと、overrideメソッドの効果は次のとおりです.
コード#コード#
 Form.prototype.onsubmit = function() {
 
    submitTest();
 
};
 
ここでsubmitTest()はfalseを返すが,この関数のみを実行し,その結果を何も処理しなかった.そして
コード#コード#
 
 
overrideメソッドの効果は次のとおりです.
コード#コード#
 Form.prototype.onsubmit = function() {
 
    return submitTest();
 
};
 
これにより,その戻り値を利用し,所期の効果を達成した.
このように理解すれば印象的になると思いますが、間違えにくいと思います
 
結論:
Javaの考え方でシミュレーションJavaScriptの類似状況を考えることができます(JavaScriptではprototypeベースのオブジェクト向け技術も確かにそうしています)が、Javaは強いタイプで、厳格な文法制限があり、JavaScriptは緩やかなタイプです.上記のように、
コード#コード#
 
Form.prototype.onsubmit = function() {
 
};
 
戻り値もあれば、戻り値もなくてもJavaでは通じません.結局、Javaではメソッドの戻り値で異なるリロード(overload)メソッドはできませんが、JavaScriptではリロードが緩やかになります.
 
 
submit()とonsubmit()の違い
最近開発でフォームの提出前に検証する問題に遭遇し、submitボタンの代わりに普通のbuttonボタンを使用しました.
このbuttonのonclickイベントは、コミット前にトリガーされ、formのsubmitイベントはそのイベントでトリガーされます.問題が発生しました.
関連コードは次のとおりです.
<form action="http://www.baidu.com/s?wd=this.form.submit%28%29%3B&cl=3" method="post" name="form1" onsubmit="return alert('   !'); return false;">
         <table align="center" width="420px" cellPadding="2" cellSpacing="1" bgcolor="#A4B6D7"       style="word-wrap:Break-word;">                                    
                   <tr style="cursor: hand;background:#d7e3f6" >
                            <td width="20%" align="right">   </td>
                            <td><input style="width:90%" type="text" name="GOODSNUM"   size="30"  maxlength="8" ></td>
                   </tr>
                   <tr>
                            <td align="center" colspan="2">
                                     <input type="button" name="save" value="  " onclick="if((confirm('      ?'))) this.form.submit();"/>
                            </td>
                   </tr>        
         </table>
</form>
 
 
formをトリガするonsubmitメソッドではなく,直接コミットしていることが分かった.おかしいですね.formを結合できないonsubmitの方法はありませんか.
よく考えてみると、this.formがformというオブジェクトを表す以上、formの属性や方法が得られるに違いない.
、this.form.onsubmit()に変更します.   成功!
マニュアルを調べてみると、submitの方法はこう説明されていました.
  The submit method does not invoke the onsubmit event handler. Call the onsubmit event handler directly. When using Microsoft® Internet Explorer 5.5 and later, you can call the fireEvent method with a value of onsubmit in the sEvent parameter.
 
submitという方法はonsubmit時間をトリガーしないという意味で、トリガーするには呼び出しが必要です
FireEventメソッド.試してみてください:this.form.fireEvent('onsubmit');ははは、やっぱり成功!しかし、これは余計なことではないでしょうか.ほほほ!
 
この小さな問題についても1時間近くやったが、後でこの問題に悩まないようにするには、これも価値がある.
this.form.submit();//フォームの直接送信
this.form.onsubmit();//formを呼び出すonsubmitメソッド
this.form.fireEvent('onsubmit');//同じように、
     PS:またfireEventという方法を学びました. 
 
JSでのsubmit()とonsubmitのちょっとした使い方
 
このログを書く前に、フォームの検証はonsubmitで、デフォルトのinputのtype=submitでした.
 
以前は、なぜこれを画像で代用したのか不思議に思っていましたが、onsubmitで検証が実行されましたが、戻り値が失われていました.つまり、検証の結果が正しいかどうかにかかわらず、構造はフォームに提出されます.そうすると、onsubmitのイベント本省の効果は現れません.彼の意味は、フォームが提出されたとき、関数値を返さない場合は、フォームに一連の操作を行います.それは仕事をするにしてもしないにしても、給料をあげるのと同じで、とても合理的ではありません.
 
秦さんの解説の下で、知っているようで分からないので、少し頭がはっきりした.
実はdhtmlにはsubmitとonsubmitの解釈があり、onsubmitはtype=submitに対して設定されています.言い換えれば、スクリプトでsubmitイベントを実現する場合は、例えば、検出に使用する関数がimfei(frm)である場合は、スクリプトはこのように書くべきです.
onclick="return imfei('document.getElementById(d)')"
ではなく
 onclick="document.getElementById('d').submit()"
理由は、コミット中で、コミットされるからです.
 
PS:inputのタイプがimageのようですが、デフォルトではsubmitと同じ効果です!