JavaScript イベント

これからがJavaScriptの本番です。

JavaScriptでのイベントとは何か?

Webページとユーザーとの対話を制御するためにJavaScriptで使われる主要なツールがイベントです。

イベントとは、ユーザーがクリック、キーボード入力、マウスの動きなどの行動を取った際に発生する事象のことを指し、ページの読み込み完了やHTML要素の変更といった行動も含みます。

各イベントには特定のイベントハンドラ（event handler）が関連付けられ、そのイベントが発生したときに、イベントハンドラは呼び出されて関連するコードが実行されます。

JavaScriptでイベントを呼び出す（つまりイベントハンドラを設定する）主な方法は以下の3つです。

HTMLタグ内に直接記述します。

この方法は、特定のHTML要素に対して直接イベントハンドラを設定します。

例えば、ボタンがクリックされたときに関数を実行するには、次のように記述します。

<button onclick="myFunction()">クリック</button>

JavaScript内でHTML要素を取得し、その要素のイベントハンドラプロパティに関数を割り当てます。

例えば、上記のボタンに対してJavaScript内でクリックイベントハンドラを設定する場合、次のように記述します。

<script>
  document.querySelector('button').onclick = myFunction;
</script>

HTML要素に対してイベントリスナー（event listener）を追加します。

このメソッドは、同じ要素に対して複数のイベントハンドラを設定することができ、かつイベント発火時の動作を詳細に制御することができます。

<script>
  document.querySelector('button').addEventListener('click', myFunction);
</script>

以上の3つの方法は、それぞれ異なる状況や要件に対応するために存在します。インラインイベントハンドラはシンプルなシチュエーションで使いやすいですが、複雑なアプリケーションでは通常はaddEventListenerメソッドが使われます。

addEventListenerを用いた方が、コードの分離が可能になり、より柔軟かつ高度なイベント管理が可能です。例えば、同じイベントに対して複数のリスナーを登録したり、後からリスナーを削除したりすることが可能になります。