モダンJavaScript入門: イベントとイベントハンドラ

JavaScriptはウェブページにインタラクティビティを追加するための言語であり、その主要な機能の一つがイベントとイベントハンドラです。この記事では、JavaScriptのイベントとイベントハンドラについて詳しく解説します。

イベントとは?

イベントはユーザーがウェブページで行うさまざまなアクションを指します。これには、クリック、マウスの移動、キーボードの押下などが含まれます。JavaScriptでは、これらのイベントを検出して特定のアクションを起動することができます。

// クリックイベントの例
document.querySelector('button').addEventListener('click', function() {
  alert('ボタンがクリックされました！');
});

イベントハンドラとは?

イベントハンドラは特定のイベントが発生したときに実行される関数を指します。上記の例では、ボタンがクリックされたときに警告メッセージを表示する関数がイベントハンドラとなります。

// イベントハンドラの例
function handleClick() {
  alert('ボタンがクリックされました！');
}

document.querySelector('button').addEventListener('click', handleClick);

イベントリスナーの登録

イベントハンドラを特定の要素に関連付けるためには、イベントリスナーを登録する必要があります。これは、addEventListenerメソッドを使用して行います。

// イベントリスナーの登録
document.querySelector('button').addEventListener('click', handleClick);

イベントオブジェクト

イベントが発生すると、イベントの詳細情報を持つイベントオブジェクトが生成され、イベントハンドラに渡されます。このオブジェクトを使用して、イベントの具体的な情報（例えば、クリックした座標や押したキーなど）を取得することができます。

// イベントオブジェクトの例
document.querySelector('button').addEventListener('click', function(event) {
  console.log('クリックされた座標: ', event.clientX, event.clientY);
});

イベント伝播

イベントは、発生元の要素から親要素へと「伝播」します。これには「キャプチャフェーズ」と「バブリングフェーズ」の2つの段階があります。イベントハンドラは、これらのどちらの段階でイベントを捕捉するかを指定することができます。

// イベント伝播の例
document.querySelector('div').addEventListener('click', function() {
  console.log('div要素がクリックされました！');
}, true);  // キャプチャフェーズでのイベント捕捉

これらの基本的な概念を理解すれば、JavaScriptのイベントとイベントハンドラを効果的に使用することができます。ユーザーの行動に応じて動的なウェブページを作成するための強力なツールと言えるでしょう。

AIko Code Symphony