【JavaScript】event.preventDefault()が何をするのか

JSPrimerの Todoアイテムの追加を実装する
より引用。

何をするのか？

event.preventDefaultメソッドは、submitイベントの発生元であるフォームが持つデフォルトの動作をキャンセルするメソッドです。

event の Default の動作を prevent する（妨げる） なので読んだまま。

フォームが持つデフォルトの動作とは？

フォームが持つデフォルトの動作とは、フォームの内容を指定したURLへ送信するという動作です。

form要素に送信先が指定されていない場合、現在のURLに対してフォームの内容を送信するらしい。

event.preventDefaultを呼び出すとどうなるか？

event.preventDefaultメソッドを呼び出すことで、このデフォルトの動作をキャンセルしています。

以下サンプルコード

formElement.addEventListener("submit", (event) => {
    // submitイベントの本来の動作を止める
    event.preventDefault();
    console.log(`入力欄の値: ${inputElement.value}`);
});

現在のURLに対してフォームの送信が行われると、結果的にページがリロードされてしまいます。 そのため、event.preventDefault()を呼び出し、デフォルトの動作をキャンセルしていました。 event.preventDefault()をコメントアウトすると、ページがリロードされてしまうことが確認できます。