3.
カフェアプリ-3
JavaScriptのイベント
イベントとは
「マウスをクリックした」「キーボードを入力した」「HTMLの読み込みが完了した」といったように、ブラウザで何か操作や動作が発生したことをイベント(Event) といいます。
イベントリスナーとイベントハンドラ
Event Listener（イベントリスナー）
Event Listener（イベントリスナー）は、イベント（マウスやキーボード操作など）を監視する仕組みです。
Event Handler（イベントハンドラ）
Event Handler（イベントハンドラ）は、イベントが発生したときに実際に実行する処理を指します。
- イベントリスナー：イベントを監視（Listen）
- イベントハンドラー：イベントが発生時に呼び出される関数
代表的なイベント
イベント名は、クリックや読み込みなどをプログラムのキーにしたもので、以下はよく利用されるイベント名の一覧です。
| イベント名(JS) | (HTML) | 説明 |
|---|---|---|
| load | onload | ページが読み込まれたとき |
| click | onclick | クリックされたとき |
| dblclick | ondblclick | ダブルクリックされたとき |
| load | onload | ページが読み込まれたとき |
| input | onload | 値が入力されたとき |
| submit | onsubmit | submitボタンが押されたとき |
| change | onchange | 内容が変更されたとき |
| keypress | onkeypress | キーボードキーが押されたとき |
| focus | onfocus | ターゲットが選択された時 |
| mouseup | onmouseup | ターゲット内でマウスをアップしたとき |
| mouseover | onmouseover | マウスカーソルがターゲットの中に入ったとき |
| mousemove | onmousemove | マウスカーソルがターゲットの中に移動したとき |
| drag | ondrag | ドラッグされたとき |
| scroll | onscroll | スクロール位置が変更されたとき |
イベントの実行方法
イベントの設定、実行方法は大きく２つに分かれます。
イベントをHTMLプロパティに設定
HTMLタグにイベントを設定するには、イベントプロパティを使用します。特定のタグのイベントを発生させたときにJavaScriptコードを実行します。イベントプロパティは「on」で始まり、イベントの種類（click, mouseover, keydown など）を指定します。
クリックイベントリスナー
<button id="myButton" onclick="clickHandler()">Click</button>
クリックイベントハンドラー
function clickHandler() {
// クリックされたときに処理
console.log("Click!!!")
}
addEventListener()
addEventListener() は、Elementに対して複数のイベントリスナーを登録できます。
クリックイベント
document.getElementById('myButton').addEventListener('click', function(event) {
// クリックされたときに処理
console.log("Click!!!")
});
ヘッダーメニュー
メニューボタン追加
ヘッダーセクションに、メニューボタンを追加します。
<body class="bg-gray-100">
<!-- Header Section -->
<header class="bg-white shadow-lg">
<div class="container mx-auto py-6 text-center">
<h1 id="title" class="text-4xl font-bold text-gray-800"></h1>
<p id="description" class="text-gray-600 mt-2"></p>
</div>
<!-- Cart Button -->
<div class="container mx-auto text-right p-4">
<button class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600">
Cart
<span id="cartCount" class="bg-white text-yellow-500 rounded-full px-2 py-1 ml-2">0</span>
</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 ml-4">
Order History
</button>
</div>
</header>
...
</body>
動作確認
