document.getElementById("hoge").addEventListener("submit", function(event){
    event.preventDefault();
});

Form の submit イベントにフックした状態で、input 要素等についている Form validation の動きはどうなるのか？

<form id="hoge">
    <input type="text" name="piyo" required />
    <button type="submit">submit</button>
</form>

document.getElementById("hoge").addEventListener("submit", function(event){
    console.log("abc");
    event.preventDefault(); // 結果を見たいのでとりあえず送信を抑止しておく
});

piyo 入力がされてない場合送信ボタンを押すとブラウザの Form Validation の機能がはたらいて送信が阻止される、つまり画面遷移しない。そして submit イベント自体が発生しない。つまり JS がまったく動かない。

submit イベントそのモノでは無いがちょっと使ったのでmemo。

ブラウザが本来持っている Form の Submit ボタンをクリックしたら発生するリクエスト処理と、 その submit ボタン自体の click イベントの処理はどのような関係にあるのか？ということ。

結論は、Form Submit によるリクエストが早く動く。つまり click にフックした処理よりも先に画面遷移してしまう。

なので Form Submit の前に何かリクエストパラメータに介入したいならボタンの click ではなく form の submit にフックしたほうがよい。