【JavaScript】event.preventDefault メソッドでタグの基本動作をキャンセルする

event.preventDefaultメソッドとは『イベントの発生元が持つデフォルトの動作をキャンセルする』メソッドです。

参考書で登場してきた段階ではevent.preventDefaultメソッドについて書いてあることがまったく理解できず『？？？』だったので改めて調べてみたところ、前提となる知識が足りなかったようです。

イベントの種類

まずイベントの種類を

1. ユーザーが発動させるイベント
2. ブラウザが勝手に発動させるイベント

の二つに分けます。

で、この内event.preventDefaultメソッドがよく使われるのは１の『ユーザーが発動させるイベント』です。

ユーザーが発動させるイベント

ユーザーが発動させるイベントとは、分かりやすい例だと

• クリックする
• 送信する
• 入力する

などで、それらのイベントが発生した際にevent.preventDefaultメソッドを使うと『イベントの発生元が持つデフォルトの動作をキャンセルする』ことができます。

イベントの発生元が持つデフォルトの動作って？

『イベントの発生元が持つデフォルトの動作をキャンセルする』メソッドなので、そもそもイベントのデフォルトの動作がどういったものなのかがわかっていないと、「preventDefault()を設定したほうがいいのかどうか」の判断ができません。

イベントのデフォルト動作一例

イベント	ブラウザのデフォルト動作
「aタグ」を「click」	aタグのherfで指定されたURLへ遷移する
「formのチェックボックス」を「click」	チェックボックスのオン/オフが切り替わる
inputの「submit」を「click」	actionで指定されたURLへ遷移＋データ送信

あくまで一例を挙げましたが、上記のようなイベントが持つデフォルト動作を知らないと、何をどんなタイミングでキャンセルすればいいのか、どんなイベントがキャンセルできるのか、が分からないと思います。

event.preventDefaultメソッドを使用する上では、これらイベントのデフォルト動作を知った上で『それを妨害したいのかどうか』を考えましょう。