JavaScript/e.preventDefaultってなんやねん

って話。

結構JavaScriptを書いてると使う機会のあるコードなんだけど。

正直ちゃんと理解をして使ってるわけじゃない。

どうやら非同期通信を始めとした技術ではどうしても使わざるをえない大前提のような記述らしいのでちょっとまとめてみようかなっと。

preventDefaultとは

実行したイベントがキャンセル可能である場合、イベントをキャンセルするためのメソッドのこと。

ちなみにe.preventDefaultと使われることが多いと思うんだけど、eってのはeventのことらしい。

例えばリンクをクリックした時、チェックボックスにチェックを入れた時なんかにイベント処理が発火するはずなんだけど、これを適用することにより発火しなくなるということ。

いやいや.on('submit')とかで指定してるじゃんダメじゃん。

なんのためにやるんだよ動かなくなるじゃんと思ったんだけど。

だからこそちゃんと考えなくてはならないみたい。

つまり「prevent(妨害する)」 「Default(初期動作)」のうち、初期動作とはなんなのかってことを考える必要がある。

イベントの初期動作と仕様を考える

ChatSpaceを例に考えるなら。

◆初期動作

メッセージ送信機能はsubmit属性を持っているわけだけど、HTML上ではaタグと紐づいていて、設定されたリンク先に飛ぶことになる。

この設定されたリンク先に飛ぶっていう動作がこの場合の初期動作。

◆仕様

非同期通信がしたい。

つまり、ユーザーが送信ボタンを押した場合にブラウザをリロードせずにメッセージを反映させたいということ。

上記を踏まえて考えると、e.preventDefaultを使わないと、送信ボタンを押した場合にブラウザリロードされちゃうよねってこと。

まとめ

・e.preventDefaultはイベントの初期動作を発火させないようにするコード

・イベントごとの初期動作とは一体なんなのか？考える必要がある

・仕様を明確にする。

・初期動作と仕様を明確にした上で、e.preventDefaultを適用するかどうか決定する。

こんなとこっすかね