Event.preventDefault()は何をするのか

Event.preventDefault()はclickやsubmitなどのイベントが持つデフォルトの動作をキャンセルする。

どういうことかというと、
例えばsubmitのデフォルトの動作というのは「フォーム内のサブミットボタンのクリック – サーバへの送信を開始します。」
つまり、type="submit"のボタンをクリックすると、formで指定したurlへ送信するという動作。

formで送信先のurlを指定しない場合、現在のurlに送信するという仕様らしいので、
今回の課題15でいうと、ボタンを押した時点でindex.html(同じ画面)に遷移してしまう。
そうすると、fetchしたデータをhtmlにappendChildしても、再描画されるためにそれは消えてしまう。

ではどうすれば良いのかというと、Event.preventDefault()の出番。

Event.preventDefault()によって、指定urlへの送信という動作をキャンセルしてあげれば、同じ画面への遷移は行われずに済む。

form.addEventListener("submit", (e) => {
  const inputNum = document.getElementById("js-input-number");
  const inputName = document.getElementById("js-input-name");
  e.preventDefault();
  init(inputNum.value,inputName.value); 
});

addEventListenerのコールバック関数にイベントを渡し、コールバック関数内でe.preventDefault();を実行。
これで意図した動きになった。

https://codesandbox.io/embed/lesson15-m99cf?fontsize=14&hidenavigation=1&theme=dark

参考ドキュメント：
https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault
https://ja.javascript.info/default-browser-action

私がJavaScriptを教えていただいている『もりけん塾』の森田先生の情報はこちら。
BLOG：無骨日記
Twitter：@terrace_tech