HTML イベント属性を使用せずに、JavaScript でフォーム送信イベントをリッスンするにはどうすればよいですか?

HTML イベント属性を使用せずに JavaScript でフォーム送信イベントをリッスンする

Web 開発では、ユーザー入力を検証し、カスタム アクションを実行するために、フォーム送信イベントの処理が不可欠です。従来、開発者は、onSubmit や onClick などの HTML 属性を使用して、これらのイベントをリッスンしてきました。ただし、この方法では HTML コードを変更する必要があり、不便でエラーが発生しやすい可能性があります。

イベント リスナーによるリスニング

HTML イベント属性を使用せずに純粋な JavaScript でフォーム送信イベントをリスニングするには、 EventTarget インターフェースの addEventListener() メソッド。これにより、HTML マークアップを変更せずにイベント リスナーをフォーム要素に添付できます。

<code class="javascript">var formElement = document.querySelector("form");

if (formElement.addEventListener) {
  formElement.addEventListener("submit", eventHandler, false); // Modern browsers
} else if (formElement.attachEvent) {
  formElement.attachEvent("onsubmit", eventHandler); // Old IE
}

function eventHandler(event) {
  // Handle form submission
}</code>

フォームが送信されるたびに、eventHandler 関数が実行されます。この関数内で検証ロジックやその他のカスタム アクションを実行できます。

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

デフォルトのフォーム送信動作を防止したい場合は、イベントでPreventDefault() メソッドを呼び出します。イベント ハンドラー内のオブジェクト:

<code class="javascript">document.querySelector("form").addEventListener("submit", function(event) {
  if (!isValid) {
    event.preventDefault(); // Prevent the form from submitting
  }
});</code>

EventTarget.addEventListener の使用

EventTarget.addEventListener メソッドは、最新のブラウザーで広くサポートされています。フォーム要素を含むさまざまな DOM 要素のイベントをリッスンするためのクロスブラウザ ソリューションを提供します。

ライブラリを使用した代替手段

ライブラリを使用する場合は、次のオプションを検討してください。

• jQuery: $(ele).submit(callback);
• React: const callback = (event) => {};
• Vue: @submit="mySubmitHandler"

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