はじめに
JSを使っているとちょくちょく出てくるevent.preventDefault()、一体なんのためにやっているのでしょうか？これまでなんとなくで使っていたので調べてみました。
event.preventDefault()は何をしているのか
ドキュメントでは以下のような説明がされています。
preventDefault() は Event インターフェイスのメソッドで、ユーザーエージェントに、このイベントが明示的に処理されない場合に、その既定のアクションを通常どおりに行うべきではないことを伝えます。
うーん、どういうことだろう
わかりづらいですが、要はevent.preventDefault()を実行することでブラウザのデフォルトの処理を強制的に終了させることができます。
実際のコードで確認してみる
<p>チェックボックスコントロールをクリックしてください。</p>
<form>
<label for="id-checkbox">チェックボックス:</label>
<input type="checkbox" id="id-checkbox" />
</form>
<div id="output-box"></div>
const checkbox = document.querySelector("#id-checkbox");
checkbox.addEventListener("click", checkboxClick, false);
function checkboxClick(event) {
const warn = "preventDefault() がこのチェックを妨害しています。\n";
document.getElementById("output-box").innerText += warn;
event.preventDefault();
}
まずHTMLの方はformタグのなかにinputタグでチェックボックスが配置されています。
次にJSです。まず
const checkbox = document.querySelector("#id-checkbox");
でidが#id-checkbox、すなわちチェックボックスのDOM要素を取得しています。
そのDOM要素を
checkbox.addEventListener("click", checkboxClick, false);
addEventListenerで監視します。何を監視するかというと先ほど取得したチェックボックスがチェックされるかどうかを監視しています。
そしてチェックボックスがクリックされるとイベント(checkboxClick)が発火するわけです。
実際にクリックするとチェックボックスにチェックマークがつかず、
preventDefault() がこのチェックを妨害しています。
という文言が画面上に表示されると思います。
長くなりましたが、このcheckboxClick()でようやくevent.preventDefault();が登場します。このメソッド内の最後で実行されていますね。
先ほどチェックボックスにチェックマークがつかなかったのはこのevent.preventDefault()がブラウザの処理を強制的に終了させているからです。
例えばformタグに以下のような形でPOSTが定義されているとチェックボックスがチェックされると、formタグのactionで定義されたパスに対してPOST通信をします。
<form method="POST" action="submit/">
<label for="id-checkbox">チェックボックス:</label>
<input type="checkbox" id="id-checkbox" />
</form>
しかしPOSTする前にバリデーションを挟みたかったり、formタグでPOSTした後はページが再遷移してしまうのを防ぎたい（遷移させる必要がないSPAなどでよくこういった状況になる）時にはこのformタグのデフォルトの機能が邪魔になってしまいます。なのでformタグのデフォルトの処理を防ぐためにevent.preventDefault();を実行することで強制的に処理を終了させているんですね。
参考