事前知識
イベント
Javascriptにおけるイベントとは、Webページ上で起こるあらゆるアクションの総称。例えば、ボタンのクリック、フォームへの入力、ページの読み込みなど、すべて「イベント」と呼ぶ。
イベントハンドラー
ハンドラとは、英語でhandlerであり、動詞でいうhandle（扱う）に由来している。日本語にすると、「イベントを扱う」的な感じ。
実際、イベントハンドラーは様々なイベント（アクション全般）の発生時、それに紐づかせた処理を実行させることができる。
具体的に言うと、イベントハンドラーを登録することで、「あるイベントA（クリックなど）が発生したとき、ある処理B（ページの色を変更させるなど）を実行させる」という自動的な流れを作ることができる。それがイベントハンドラー。
イベントリスナー
上で書いたイベントハンドラーとほとんど同じだが、１つだけ大きく異なる部分がある。それは、「イベントハンドラーは一つのイベントに対して、１つの処理しか設定できない」ということ。しかし、「イベントリスナーは一つのイベントに対して、複数の処理を設定できる」ということ。（イベントハンドラーに複数の処理を登録しようとすると、後の処理が優先され前の処理は上書きされる）
コールバック関数
そもそもコールバックとは、簡単に言うと、関数の引数に別の関数をセットすること。
つまり、コールバック関数とは、そのセットされた関数を指す。
これによって何のメリットがるのかというと、例えばAという関数があり、その関数の引数にBという関数をセットしていたとする。すると、「関数Aの処理が終わった後に、関数Bの処理を実行させる」ということが可能になる。
よく使われるケースは、サーバーからデータを取得したあとに何らかの処理を実行するときなど。サーバーからのデータの取得を待たずに次の関数が実行されてしまうと不具合が生じる。
本題 function(e)の「e」とは？
eventの略。イベントオブジェクトのこと。イベントオブジェクトとは、発生したイベントに関する様々な情報を提供するオブジェクトのこと。これはそのイベントと紐づくイベントハンドラーやイベントリスナーで設定されたコールバック関数の引数として自動的に渡される。加えて引数として渡されるこのイベントオブジェクトは省略可能なので注意。
イベントオブジェクトにセットされている主なプロパティ一覧
| プロパティ | 内容 |
|---|---|
| type | 発生したイベントの型を返す |
| target | イベントの発生元であるオブジェクトを返す |
| timestamp | イベントの発生時間 |
| pageX | クリックされたX座標 |
etc...