HTMLを変更せずにJavaScriptでフォーム送信イベントを検出する方法

HTML マークアップを使用しないフォーム送信イベントの検出

JavaScript の一般的なタスクの 1 つは、フォームを送信する前にフォームを検証することです。従来、これは、onSubmit や onClick などの HTML 属性を使用して実現されてきました。ただし、HTML コードを変更せずにスタンドアロンの検証ライブラリを作成するには、より優れたアプローチが必要です。

解決策は、JavaScript でフォームの送信イベントをネイティブにリッスンすることです。その方法は次のとおりです。

<code class="javascript">var ele = /*Your Form Element*/;
if (ele.addEventListener) {
    ele.addEventListener("submit", callback, false);  //Modern browsers
} else if (ele.attachEvent) {
    ele.attachEvent('onsubmit', callback);            //Old IE
}</code>

このコードでは、ele はフォーム要素を表し、コールバックはフォーム送信時に実行する関数です。

イベントの伝播

このコードを完全に理解するには、イベントの伝播を理解することが重要です。次の HTML について考えてみましょう:

<code class="html"><form id="myForm">
    <input type="submit">
</form></code>

送信ボタンをクリックすると、「送信」イベントがトリガーされます。このイベントは、ボタンから始まりフォーム要素で終わる DOM ツリーをバブルアップします。フォーム自体の送信イベント (ele.addEventListener('submit')) をリッスンすることで、ツリーを上に移動するときにイベントをキャプチャします。

デフォルトのフォーム送信の防止

フォーム送信時にカスタム アクション (検証など) を実行したい場合は、preventDefault() を使用してブラウザのデフォルトの送信動作を防止できます。

<code class="javascript">document.querySelector("#myForm").addEventListener("submit", function(e) {
    if (!isValid) {
        e.preventDefault();    //stop form from submitting
    }
});</code>

上記のコードでは、isValid が false の場合、

ライブラリ統合

ネイティブ JavaScript の使用が推奨されますが、一部の開発者はライブラリを好みます。一般的なライブラリでフォーム送信イベントをリッスンする方法は次のとおりです:

• jQuery: $(ele).submit(callback);
• Prototype : ele.observe('submit', callback);
• MooTools: ele.addEvent('submit', callback);

Byイベントの伝播を理解し、ネイティブの addEventListener またはライブラリ統合を利用すると、HTML コードを変更せずに JavaScript でフォーム送信イベントを効果的にリッスンできます。

以上がHTMLを変更せずにJavaScriptでフォーム送信イベントを検出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。