クレジットカード決済用JavaScript準備②charge-formのidが設定されたフォームにsubmitイベント発火させるイベント直前でキャンセル

const pay = () => {
  const form = document.getElementById("charge-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    console.log("フォーム送信時にイベント発火")
  });
};

window.addEventListener("load", pay);

const

１）変数宣言（再宣言・変数への再代入不可）
２）constはブロックスコープブロックとは、{ }で括られたなか限定
３）var,letより常にconstを使うことのがベスト

上のコードではページが読み込まれたタイミングで、まずid属性を使ってform要素を取得して変数formに入れます。

getElementById

getElementByIdは、任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメソッドで、そのIDが書かれた場所を特定します。

addEventListener("submit",

submit イベントは、ユーザーが送信ボタン ( または ) を押したり、 Enter キーをフォーム内のフィールド (例えば ) の編集中に押したりしたときに発生します。

続いてすぐに受け取った変数formをaddEventListenerメソッドを使ってイベント「submit」が発生したら処理を実行できるようにイベントリスナーを登録しています。

省略あり

form.addEventListener("submit", (e) 

省略なし

form.addEventListener("submit", function(e) 

処理の際に引数で変数e(※今回だと"submit"を(e)という変数に代入している)を渡していますが、これはEventオブジェクトが自動的に渡されます。
実行する処理の1行目にpreventDefaultメソッドを実行していますが、これはEventオブジェクトが標準で持っているメソッドで、実行するとデフォルトの動作をキャンセルすることができます。ここではフォームの送信をキャンセルするので、このメソッドを実行するとフォーム送信は行われません。

参考：石戸 康平 Kohei Ishidoさま
https://gray-code.com/javascript/execute-processing-when-submitting-the-form/

console.log

このメソッドは主に、渡された値をコンソールに表示するために使用します