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

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

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

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
}

「ele」をフォーム要素への参照に置き換え、「callback」をフォームの送信時に実行する関数に置き換えます。

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

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

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

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

jQuery

$(ele).submit(callback);

例

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

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