イベントとは
まず、イベントとは、ユーザーがウェブページで何か操作を行ったとき（例えば、ボタンをクリックしたり、マウスを乗せたり、キーを押したり）に起こる動作のことです。
このイベントを検知して、特定の処理を行うことができます。
イベントリスナー
イベントリスナーは、ボタンなどの特定のものが、クリックなどの特定の操作を受けたときに、何をするかを決める役割があります。
イベントリスナーを使って、操作があったときにどんなことをするかを設定します。
const button = document.getElementById("myButton");
button.addEventListener("click", function () {
alert("ボタンがクリックされました!");
});この例では、「myButton」というIDを持つ要素に対して、clickイベントが発生したときにアラートを表示する関数を設定しています。
イベントハンドリング
イベントハンドリングは、ウェブページで起こる操作に対して、どんな処理をするかを決めるための手順です。
イベントリスナーを使って操作を感知し、イベントが起こったときにどんな処理をするかを決めることが、イベントハンドリングの一部です。
イベントハンドリングの基本的な手順
- 操作を受けるもの（ボタンなど）を選ぶ
- イベントリスナーを使って、操作があったときにどんな処理をするかを決める
- 操作があったときに、どんなことをするかを実際に書く
例えば、ボタンをクリックしたときにメッセージを表示するイベントハンドリングは以下のように実装できます。
// 1. イベントを検知する要素を選択
const button = document.getElementById("myButton");
// 2. イベントリスナーを設定し、イベントハンドラを指定
button.addEventListener("click", function () {
// 3. イベントハンドラ内で、イベント発生時の処理を実装
alert("ボタンがクリックされました!");
});イベントハンドリングでは、さまざまなイベントに対応できます。以下に一部のイベントを紹介します。
click: 要素がクリックされたときに発生するイベントmouseover: マウスカーソルが要素の上に乗ったときに発生するイベントmouseout: マウスカーソルが要素から外れたときに発生するイベントkeydown: キーが押されたときに発生するイベントkeyup: キーが離されたときに発生するイベントchange: フォーム要素の値が変更されたときに発生するイベント
キーハンドリング
キーハンドリングは、キーボードの操作をウェブページで受け取る方法です。
キーボードで文字が入力されたり、特定のキーが押されたり離されたりすると、ウェブページで処理が行われます。
JavaScriptでは、次の3つのイベントを使ってキーハンドリングを行います。
- keydown: キーが押されたとき
- keypress: 文字キーが押されたとき
- keyup: キーが離されたとき
例えば、ユーザーがエンターキーを押すと、アラートを表示するコードは以下のようになります。
document.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
alert("エンターキーが押されました!");
}
});このコードでは、keydownイベントが発生すると、関数が実行されます。関数内で、押されたキーがエンターキーかどうかを確認して、エンターキーが押されたらアラートが表示されます。
キーハンドリングは、フォームの入力チェックやゲームの操作など、さまざまな場面で役立ちます。
まとめ
今日はイベントリスナーとイベントハンドリングについて学びました。
具体的な例や使い方を通じて、イベントリスナーとイベントハンドリングの基本的な使い方を理解出来たと思います。
ユーザーが何かをした際、WEBページを動かすことができれば、より効果的にユーザーに対してアプローチが可能になりますよ。
- イベントリスナー: イベント（クリックやマウスオーバーなど）が発生したときに実行される関数を登録する仕組み。
- イベントハンドリング: イベントが発生したときに実行される処理のこと。
- クリックイベント: ボタンやリンクなどの要素がクリックされたときに発生するイベント。addEventListener(‘click’, 関数) で登録できます。
- マウスオーバーイベント: マウスカーソルが要素の上に乗ったときに発生するイベント。addEventListener(‘mouseover’, 関数) で登録できます。
- キーイベント: キーボードのキーが押されたり離されたりするときに発生するイベント。主にkeydown、keypress、keyupの3つがあります。
- キーハンドリング: キーボード操作をウェブページで受け取り、処理を行うこと。