イベントリスナーの使い方と実例 – JavaScriptで始めるプログラミング

イベントリスナーの使い方と実例 – JavaScriptで始めるプログラミング

JavaScriptでは、イベントリスナーを使ってユーザーのアクションに応じた動作を実装することができます。この記事では、イベントリスナーの基本的な使い方と実例を紹介します。

イベントリスナーの基本

イベントリスナーは、特定のイベントが発生した時に実行される関数（callback）を登録する仕組みです。addEventListenerメソッドを使って、HTML要素にイベントを監視させることが一般的です。

document.getElementById('myButton').addEventListener('click', function() {
  alert('ボタンがクリックされました');
});

主要なイベントタイプ

• クリックイベント: click
• マウスオーバーイベント: mouseover
• キーボードイベント: keydown

実例: ボタンクリックで色変更

次に、簡単な実例として、ボタンをクリックするとテキストの色が変更されるコードを紹介します。以下の例では、ボタンをクリックするとパラグラフの色が赤に変わります。

document.getElementById('colorButton').addEventListener('click', function() {
  document.getElementById('text').style.color = 'red';
});

HTML

<button id="colorButton">色を変更</button>
<p id="text">このテキストの色が変わります。</p>

まとめ

イベントリスナーを使うことで、ユーザーのインタラクションに応じた動作を簡単に実装することができます。さらに、自分のウェブアプリケーションに動的な要素を追加することが可能です。詳細については、MDN Web Docs(外部リンク)を参照してください。