はじめに
今回は、JavaScriptのイベント処理について詳細をまとめていきます。JavaScriptのイベント処理は、ユーザーの操作やブラウザの動作に対して、特定のアクション（処理）を実行する仕組みを指します。
イベント処理の基本
イベントとは
特定の状況や操作が発生したことを示します。主なイベントには以下のようなものがあります。
click: // ユーザーが要素をクリックしたとき
mouseover: // ユーザーが要素にマウスカーソルを乗せたとき
keydown: // キーボードのキーが押されたとき
submit: // フォームが送信されたとき
load: // ページや画像が完全に読み込まれたとき
イベントリスナーとは
イベントが発生したときに実行される関数を「イベントリスナー」と呼びます。このリスナーは、特定の要素に「待ち構える」形で設定します。
イベント処理の構文
element.addEventListener('イベント名', 実行する関数); // イベントリスナーの設定
例１）ボタンをクリックしたときにメッセージを表示・非表示させる
See the Pen ボタンをクリックしたときにメッセージを表示・非表示させる by Uka Suzuki (@uukasuzuki_) on CodePen.
- 初回クリックでmessage.textContentが空かどうかを確認し、空の場合はメッセージを表示します。
- すでにメッセージが表示されている場合、クリックするとtextContentを空にして非表示にします。
例２）マウスオーバーで色を変える
See the Pen マウスオーバーで色を変える by Uka Suzuki (@uukasuzuki_) on CodePen.
div.addEventListener("mouseover", function () {
div.style.backgroundColor = "lightgreen";
});
- 上記は、addEventListenerメソッドを使って、mouseoverイベントを設定しています。加えて、mouseoverイベントは、マウスカーソルがdiv要素の上に乗ったときに発生します。
- このイベントが発生した際、要素のstyle.backgroundColorプロパティをlightgreenに変更します。これにより、マウスが要素に乗った瞬間に、要素の背景色が緑色に変わります。
div.addEventListener("mouseout", function () {
div.style.backgroundColor = "lightblue";
});
- addEventListenerメソッドを使って、mouseoutイベントを設定しています。加えて、mouseoutイベントは、マウスカーソルがdiv要素から外れたときに発生します。
- このイベントが発生した際、divの背景色をlightblueに戻します。これにより、マウスが要素から外れた瞬間に元の色（青）に戻ります。
イベントオブジェクトとは
document.addEventListener('click', function(event) {
console.log('クリックされた要素:', event.target);
});
イベントが発生したとき、JavaScriptはイベントに関する詳細な情報を含む「イベントオブジェクト」を自動的に渡します。これを使うことで、クリックされた要素やキーボードの押されたキーなど、詳細な操作情報を取得できます。
まとめ
今回は、イベント処理の基本と具体例についてまとめました。次回は、これらを元にフォーム入力について考えていきます。