クリックで学ぶJSイベント

イベント処理の基礎

JavaScript初心者が最初に直面する概念の一つが「イベント処理」です。イベントとは、ユーザーがブラウザ上で行う操作（クリック、キー入力、スクロールなど）が発生した瞬間を指します。イベントが発生すると、ブラウザはそのイベントを「発火」させ、登録された「リスナー」に通知します。リスナーは、イベントが起きたときに実行される関数です。

イベント処理を行うためには、まず対象となるDOM要素を取得し、次にその要素に対してリスナーを登録します。リスナーは、addEventListenerメソッドを使って簡単に追加できます。addEventListenerは、第一引数にイベント名、第二引数に実行したい関数を渡すだけで、イベントが発火したときに自動的に呼び出されます。

addEventListenerでクリックイベントを扱う

クリックイベントは、ユーザーがマウスで要素をクリックしたときに発火します。以下のコードは、ボタンをクリックしたときにメッセージを表示する例です。

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

上記の例では、'click'というイベント名を指定しています。これにより、クリックイベントが発火すると、指定した関数が実行されます。クリックイベントは「クリックイベント」と呼ばれ、ユーザーインタラクションを扱う際の基本的なリスナーです。

マウスイベントとキーボードイベントの実装

クリック以外にも、マウスイベント（mouseover, mouseout, mousemoveなど）やキーボードイベント（keydown, keyup, keypressなど）があります。これらもaddEventListenerで簡単に扱えます。

// マウスオーバー時に背景色を変える
const box = document.getElementById('hoverBox');
box.addEventListener('mouseover', () => {
  box.style.backgroundColor = '#f0f8ff';
});
box.addEventListener('mouseout', () => {
  box.style.backgroundColor = '';
});

// キーボード入力を検知
document.addEventListener('keydown', (e) => {
  console.log(`キーが押されました: ${e.key}`);
});

マウスイベントは「マウスイベント」と呼ばれ、カーソルの位置や動きを検知します。キーボードイベントは「キーボードイベント」と呼ばれ、ユーザーが入力したキーを取得できます。これらのイベントも、発火すると登録したリスナーが呼び出される仕組みです。

なんでも技術ブログ

このブログを検索