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

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

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

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

<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() メソッドを使用します。

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

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

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

jQuery

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

例

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

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

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