HTML 属性を超えて Javascript でフォーム送信イベントをリッスンするにはどうすればよいですか?

JavaScript でのフォーム送信イベントのリッスン: HTML 属性を超えて

JavaScript でのフォーム送信の検出は、ユーザー入力とフォームの動作を制御します。 onClick や onSubmit などの HTML 属性を使用すれば十分ですが、カスタマイズと柔軟性が制限されます。この記事では、純粋な Javascript と共通ライブラリを使用してフォーム送信イベントをリッスンするための代替方法について説明します。

純粋な Javascript アプローチ

イベント リスナーをフォーム要素にアタッチするには、addEventListener を使用します。または、ブラウザのサポートに基づいたattachEvent:

<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>

ネイティブの送信イベントをキャンセルするには、コールバック関数内でpreventDefault()を使用します:

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

ライブラリアプローチ

ライブラリ (例: jQuery) を使用する場合:

• jQuery:

<code class="javascript">$(ele).submit(callback);</code>

Cross -ブラウザの互換性

addEventListener メソッドは広くサポートされていますが、古いブラウザではattachEvent が必要な場合があります。ブラウザ間の互換性を確保するには、必要に応じて両方の方法を使用してください。

以上がHTML 属性を超えて Javascript でフォーム送信イベントをリッスンするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。