フォームの送信イベントが応答しない

1. 問題の説明<br />JS を使用してフォームの送信メソッドを呼び出してフォームを直接送信すると、送信イベントが応答しません。なぜ？ご存知でしたらご返信ください。同様に、input.select() を使用してテストしましたが、select イベントに応答できました。とりあえずこの理由は置いておいて、まずは現状の問題をどう解決するかを考えてみましょう。
イベントに応答しないコード例:
<フォーム id="form1" アクション="http://www.jb51com"></フォーム>
<script type="text/javascript">
var フォーム = document.getElementById('form1');
フォーム.onsubmit = 関数() {
警告(1);
};
フォームを送信します。
</スクリプト>
実際の動作ではアラートは発行されません。
フォームを送信するために submit メソッドを使用することは、Unobtrustive Javascript の原則に違反しますが、検索プロンプト (オートコンプリート) で項目を選択した後に JS を使用して検索フォームを送信する場合など、このメソッドを使用する必要がある場合もあります。
2. 問題分析<br />イベントに応答しないため、これらのイベントを手動でトリガーするしかありません。手動でトリガーするソリューションを決定する前に、イベント登録方法を確認しましょう。
2 つの「オリジナル」登録方法があります。コード例を参照してください。
<form id="form1" action="https://www.jb51.net" onsubmit="alert(1)"></form><form id="form1" action="https://www.jb51.net"></form>
<script type="text/javascript">
document.getElementById('form1').onsubmit = 関数() {
警告(1);
}
</スクリプト>
このような登録イベントは、フォームに onsubmit メソッドを追加します。したがって、このメソッドを直接実行すると、イベントを手動でトリガーするのと同じことになります。
コード例を参照してください:
<script type="text/javascript">
フォームを送信します。
</スクリプト>
アラートが表示されます。
ただし、「高度な」DOM2 標準登録方法と IE の登録方法である attachmentEvent はすでに非常に一般的に使用されています。これらの登録方法には、onsubmit メソッドは存在しません。form.onsubmit() を使用すると、エラーが直接報告されます。
3. 解決策<br />もちろん、「高度な」登録方法自体も手動でイベントをトリガーするための解決策を提供しますが、DOM2標準とIE用に異なるプログラムを作成する必要があります。また、このプログラムは「オリジナル」の登録方法にも有効です。コード例を参照してください:
<script type="text/javascript">
//IE の火災イベント
（フォームのfireEvent）{
フォームの発行イベントを'onsubmit'に設定します。
フォームを送信します。
//DOM2 発火イベント
} そうでない場合 (document.createEvent) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent('submit', false, true);
フォームにイベントをディスパッチします。
}
</スクリプト>
4. コードの概要<br />ここでは詳細な方法については説明しません。詳しくない方は、各自で関連情報を参照してください。コード全体をつなげてみましょう:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" content="text/html; charset=GBK">
<title>送信</title>
<script type="text/javascript" src="http://k.kbcdn.com/js/yui/build/utilities/utilities.js"></script>
</head>
<本文>
<フォームid="form1" アクション="https://www.jb51.net"></フォーム>
<script type="text/javascript">
var フォーム = document.getElementById('form1');
//YUI 登録イベント
YAHOO.util.Event.on('form1', 'submit', 関数() {
アラート('yui');
});
//DOM0 レジスタイベント
フォーム.onsubmit = 関数() {
警告(1);
};
//DOM2 登録イベント
フォームにイベントリスナーを追加する場合
フォーム.addEventListener('送信', 関数() {
警告(2);
}、間違い）;
//IE レジスタイベント
} それ以外の場合 (form.attachEvent) {
フォーム.attachEvent('onsubmit', 関数() {
警告(2);
});
}
//IE の火災イベント
（フォームのfireEvent）{
フォームの発行イベントを'onsubmit'に設定します。
フォームを送信します。
//DOM2 発火イベント
} そうでない場合 (document.createEvent) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent('submit', false, true);
フォームにイベントをディスパッチします。
}
</スクリプト>
</本文>
</html>
全体のプロセスに小さな問題があります。FX では、form.submit() は必要ありません。フォームは直接送信されるため、この文は省略されています。理由がわかる場合は、返信をお願いします。
このデモは IE6/IE7/FX でテストされています。

<<: イメージのアップロードとダウンロードに docker をプロキシするためのプライベートライブラリとして nexus を使用する

>>: Reactソースコードにおけるビット演算について詳しく説明します