イベント体験プレイグラウンド
ボタンや入力にイベントリスナーを追加して、addEventListener の動きをその場で確認しよう。
操作する要素
ボタン
テキスト入力
カラーボックス
ホバーしてね
監視するイベント
（リスナーなし）
イベントログ
リスナーを追加して要素を操作すると、ここにイベントが表示されます
使い方
- 「監視するイベント」のチェックボックスで確認したいイベントを選ぼう（複数選択OK）
- ＋ リスナー追加 ボタンを押して、イベントリスナーをアタッチしよう
- ボタンをクリックしたり文字を入力したりすると、右パネルにイベントログが流れるよ！
「イベント」が分かりにくいのは目に見えないから
JavaScriptのイベント処理は、コードを書いても「本当に動いてるのか」が分かりにくい。
addEventListener を書いてもエラーは出ないし、リスナーが登録されたかどうかは見た目では判断できない。
このプレイグラウンドでは、イベントが発火するたびにログが流れる。 「クリックしたら click イベントが飛ぶ」「キーを押したら keydown → keyup の順で発火する」という動きが、リアルタイムで目に見える。
試してほしい3つの実験
- click と mousedown/mouseup の順番 — 3つ全部にチェックを入れてボタンをクリック。mousedown → mouseup → click の順で発火することが確認できる。
- input と change の違い — テキスト入力欄で1文字ずつ打つと input は毎回発火するけど、change はフォーカスが外れたときだけ。
- keydown の連続発火 — キーを押しっぱなしにすると keydown が連続で発火する。ゲーム操作の仕組みが分かる。
授業や課題でどう役立つ？
- 「ボタンを押したら○○する」の仕組みを理解 — 教科書で読むだけだと抽象的。実際にイベントログを見れば「こういう仕組みか」と腑に落ちる。
- フォームバリデーションの前段階 — 入力チェックを実装する前に「どのタイミングでイベントが飛ぶか」を把握しておくと、適切なイベントを選べる。
- ゲーム制作の基礎 — キーボード操作でキャラを動かすには keydown/keyup を使う。このツールで発火タイミングを確認してからコードを書くとスムーズ。
よくある質問
- Q. addEventListener と onclick の違いは？
onclickは1つしか登録できない（上書きされる）。addEventListenerは同じ要素に複数のリスナーを追加できる。基本的に addEventListener を使おう。- Q. イベントが発火しないときは何を確認すべき？