JavaScriptのイベントについて軽くまとめる

イベントとは

JavaScriptのイベントとは、ユーザーの各種操作や時間の経過など、さまざまな要素に応じて発せられるシグナルのことで、JavaScriptはこれに応じて関数などを実行することが可能です。
例えばボタンをクリックしたときに発生したイベントをJavaScriptで受け取り、関数を実行することでサーバーに処理を投げずにボタンの処理を実行することができます。
イベントが発生することを「発火する」と呼んだりもします。

イベントの流れ

1. イベント発生
   マウスがクリックされる。特定の時間が経過する。などイベントはさまざまな条件で発生します。
   イベントを発生させるために特にコードを書く必要はなく、自然と発生するため普段はあまり意識しないことも多いかもしれません。
2. イベントリスナーがイベントを捕捉する
   ここからがJavaScriptの出番です。
   自然に発生するさまざまなイベントをJavaScriptでリッスン(監視)することができます。
   リスナーはイベントを補足すると、設定した関数を実行します。
3. イベントハンドラが実行される
   イベントリスナーがイベントを捕捉した際に実行される関数をイベントハンドラといいます。
   イベントハンドラはイベントリスナーからイベントオブジェクトを受け取り、それに応じた処理を実行することができます。

イベント処理の例

document.getElementById('myButton').addEventListener('click', function() {
    this.style.backgroundColor = 'red';
});

上記のイベント処理はまずgetElementByIdを用いてmyButtonというIDが振られた要素を取得し、addEventListenerで要素に対するイベントを監視しています。
addEventListenerの第一引数には監視するイベントを、第二引数には実行する関数を設定します。
上記の場合では、myButtonをクリックされた時のイベントを捕捉し、myButtonの背景色を赤に変更しています。

また、イベントハンドラはhtmlに直接記載することもできます。

<button onclick="this.style.backgroundColor = 'red'">クリックしてください</button>

これは上記のjavascriptと全く同じ動きをしますが、現在では推奨されていません。
再利用性やメンテナンス性などの観点からHTMLとJavaScriptは完全に分離すべきとされているためです。

最後に

以上で非常に軽くですが、JavaScriptのイベント処理についてまとめました。
イベントリスナーは本当に多岐に渡り存在するため、実装の際は最適なリスナーが存在するか調べるようにしましょう。