【JS】イベントハンドラってなに？

今回はイベントハンドラってなに？という話をします。超簡単だよ。

イベントハンドラってなに？

イベントハンドラとは、特定のイベントが発生した際に実行される関数や処理のことです。

コンピュータプログラム全般で幅広く使用される用語なので、特定の言語内のみで使用される専門用語ではありません。

なお、今回のサンプルコードはJavaScriptで解説していきます。

サンプルコードで見てみよう

以下にイベントハンドラが利用されているコードを書いてみます。

const button = document.querySelector('button');

function handleClick(event) {
  // ここにクリックイベントが発生した時の処理を書く
  console.log('Button clicked!');
}

button.addEventListener('click', handleClick);

上記のコードではボタンクリック（これがイベント）に応じて、console.logに文字を出力する単純な処理が書いてあります。

consoleへの文字出力はhandleClick関数として定義されています。

このコードでいうと、handleClick関数がイベントハンドラです。

カタカナとか英語で言われるとわかりにくいですが、イベントハンドラとは要するに

イベントが発生した際に実行される関数や処理のこと

です。

ちなみに、イベントに応じて動く処理なので「イベントハンドラ」と呼びます。

イベントにはclickやinputなどいくつかの種類がありますが、そのいずれかに応じて動くものと覚えておいてください。

単に「ハンドラ」とだけ呼ぶときは、文脈が異なる可能性があるので気を付けましょう。