ホームページ > ウェブフロントエンド > jsチュートリアル > HTMLを変更せずにJavaScriptでフォーム送信イベントをリッスンする方法は?

HTMLを変更せずにJavaScriptでフォーム送信イベントをリッスンする方法は?

Linda Hamilton
リリース: 2024-10-28 03:37:01
オリジナル
217 人が閲覧しました

How to Listen to Form Submit Events in JavaScript Without Modifying HTML?

HTML を変更せずに JavaScript でフォーム送信イベントをリッスンする

この記事では、HTML を変更せずにフォーム送信イベントをリッスンするという一般的な課題に対処します。 HTMLコードを変更する必要があります。 HTML の onClick 属性や onSubmit 属性に依存する代わりに、純粋な JavaScript ソリューションを提供します。

これを実現するには、EventTarget.addEventListener メソッドを利用します。このメソッドを使用すると、フォーム要素で特定のイベントが発生したときに実行されるコールバック関数を登録できます。

1

2

3

4

5

6

<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」をフォーム要素への参照に置き換え、「callback」を関数に置き換えます。フォームの送信時に実行したいとします。

ネイティブのフォーム送信動作 (ページの更新など) を防ぐには、コールバック関数内で .preventDefault() メソッドを使用します。

1

2

3

4

5

<code class="javascript">document.querySelector("#myForm").addEventListener("submit", function (e) {

  if (!isValid) {

    e.preventDefault(); // Stop form from submitting

  }

});</code>

ログイン後にコピー

ライブラリを使用してイベントの送信をリッスンする

必須ではありませんが、イベントの送信をリッスンするためにライブラリを使用することをお勧めします。共通ライブラリを使用してこれを行う方法は次のとおりです。

jQuery

1

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

ログイン後にコピー

[jsfiddle.net/] DerekL/wnbo1hq0/show](http://jsfiddle.net/DerekL/wnbo1hq0/show)

これらのテクニックを使用すると、HTML コードに触れることなく、JavaScript でフォーム送信イベントを簡単にリッスンできます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート