JSのsubmitについて

Question

1.JSのsubmitイベントってe.preventDefaultしないと、かならずページがリフレッシュされてしまいますが、あれはなぜでしょうか。
JSの仕様なのでしょうか。。。
2.preventDefaultは挙動を途中でストップさせると勉強したのですが、submit自体は行われるのはなぜでしょうか。。。ストップするならsubmitは途中中断されて行われないのでは。。。と思ったのですが。。。

#HTML

<form id="form">
  <label>Test field: <input type="text"></label>
  <br><br>
  <button type="submit">Submit form</button>
</form>
<p id="log"></p>

#JS

function logSubmit(event) {
  log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;
  event.preventDefault()
}
const form = document.getElementById('form');
const log = document.getElementById('log');
form.addEventListener('submit', logSubmit);

何卒よろしくお願いします。

Comments

[x_x]

「submit自体は行われる」というのは、何をもってそのように判断したのでしょうか？

[tomoharu]

返信が遅れてしまい、申し訳ございません。下記アンサーで納得しましたので大丈夫です。お忙しいなかありがとうございます。

Answer 1

1.JSのsubmitイベントってe.preventDefaultしないと、かならずページがリフレッシュされてしまいますが、あれはなぜでしょうか。

jsの仕様ではなくHTMLの仕様といったほうがいいかもしれません。
「submit」はそもそも「サーバーにフォーム情報を送信する機能」なので、
「submitイベント」を拾った時点でsubmitは開始されています。
そのためpreventDefaultでイベント自体をキャンセルしてあげる必要があります。

• Event.preventDefault()

→イベントが明示的に処理されない場合に user agent に、そのデフォルトアクションを通常どおりに行うべきではないと伝えます。

2.preventDefaultは挙動を途中でストップさせると勉強したのですが、submit自体は行われるのはなぜでしょうか。。。ストップするならsubmitは途中中断されて行われないのでは。。。と思ったのですが。。。

どこにもsubmitされた情報を取得する処理がないので、「submit自体は行われる」の根拠が今一つ分かりませんが先に書いたように「submitイベントを拾っているから」と思います。

もし「自身が意図したタイミングでsubmitさせたい」のであればbuttonのtypeをbuttonにしてbuttonのクリックイベントを拾い、form.submit()を明示的に書けば良いと思います。

Comments

[tomoharu]

返信が遅れてしまい、申し訳ございません。詳細なご回答ありがとうございます。下記アンサーで納得しましたので大丈夫です。お忙しいなかありがとうございます。

[m.ts10806]

「大丈夫です」の意味がよく分かりませんが解決されたようで何よりです

Answer 2

1.JSのsubmitイベントってe.preventDefaultしないと、かならずページがリフレッシュされてしまいますが、あれはなぜでしょうか。

JSの仕様なのでしょうか。。。

むしろ考え方が逆。
パラメータ付きでページを遷移させることをサブミットといいます。

2.preventDefaultは挙動を途中でストップさせると勉強したのですが、submit自体は行われるのはなぜでしょうか。。。ストップするならsubmitは途中中断されて行われないのでは。。。と思ったのですが。。。

多くのイベントではpreventDefaultするとそのイベントの実行を停止します
submitも同様でサブミットを止めてしまうので、次のページに遷移しないし
パラメータを渡すこともありません。
ただしsubmitを停止した場合、バックグラウンドでajaxなど非同期処理で
submitと同等の処理を入れることは可能です
（バックグラウンド処理なのでページは遷移しません）