フォーム要素のsubmit()メソッドとonsubmitイベント応用の概要_基礎知識

WBOY
リリース: 2016-05-16 17:42:25
オリジナル
1194 人が閲覧しました

form 要素には、フォーム送信を監視するための submit メソッドと onsubmit イベント ハンドラーがあります。フォームの送信は、elemForm.submit() メソッドを使用してトリガーできます。
1. name="submit" の要素がフォーム要素に表示されます
この場合、フォームの元の submit メソッドがフォームの送信をトリガーしません。上書きされます (formElem.submit は要素への参照です)。
2. elemForm.submit(); フォーム
の onsubmit イベントはトリガーされません。これは標準で規定されています。
これと似ていますが、onfocus、onblur、focus()、blur() の関係は異なります。elem.blur() または elem.focus() を呼び出すと、onblur イベントと onfocus イベントがトリガーされます。
これらは、一部の UI コンポーネントを設計するときに、一部のイベントが内部で呼び出されたときに関連するイベントをトリガーする必要があるかどうかを考慮する必要があるというアイデアを提供します。たとえば、Dialog コンポーネントには onopen イベントがあり、返されるオブジェクトには open() メソッドも含まれます。このとき、open() メソッドが onopen() イベントをトリガーする必要があるかどうかを考慮する必要があります。
3. フォームを動的に作成するときに発生する問題
よく使用されるメソッドは次のとおりです。フォームが送信される前に呼び出され、フォームを送信する必要があるかどうかが判断されます。 validate() 関数の戻り値について。

コードをコピー コードは次のとおりです。



ただし、フォームに動的に検証を追加する場合、つまり、HTML コードに onsubmit が記述されておらず、ページがロードされたら、JavaScript を使用してフォームにハンドラーを追加します。ここで問題が発生します。フォームの DOM ノードを取得し、変数 elemForm に保存したとします。通常、次のようにハンドラーを追加します。
コードをコピー コードは次のとおりです。

var check = function() {
if ('OK') {
return true;
} else {
return false;
}
};
if (elemForm.addEventListener) {
elemForm.addEventListener("submit", check,
); else if (elemForm. attachEvent) {
elemForm.attachEvent("onsubmit", check);
}

問題が発生します:「return false;」これが、誰もが onsubmit 属性に「check()」だけでなく「return check()」と書く理由です。

その理由は何ですか? ECMAScript 言語バインディングを参照してください。「オブジェクト EventListener: これは ECMAScript 関数参照です。このメソッドには戻り値がありません。パラメーターは Event オブジェクトです。」と明確に記載されています。これは、イベント リスナーには戻り値がないことを意味します。別の言い方をすると、addEventListener は複数のリスニング関数を要素にバインドできますが、特定のイベント リスニング関数の戻り値をイベント全体の戻り値として使用することはできません。次の方法で問題を解決できます
コードをコピー コードは次のとおりです:

function check(ev) {
ev = ev window.event; // イベントオブジェクト
if (ev.preventDefault) { // 標準ブラウザ
e.preventDefault(); else { // IE ブラウザ Device
window.event.returnValue = false;
}
}

実際、すべての根本は IE が DOM レベルをサポートしていないことにあります。 2.
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!