Webデザインを仕事にしていると、必ずといっていいほど出会うのがJavaScriptのイベント処理。
なかでも addEventListener は、ユーザーの操作に応じてWebページを動かすための必須メソッドです。
「クリックしたらメニューが開く」「入力フォームに文字を打つと注意文が表示される」
こうした動きを支えているのが、イベントです。
この記事では、Webデザイナーになりたての方にもわかりやすいように、addEventListenerでよく使われるイベントを表にまとめ、実務で役立つポイントを解説していきます。
目次
addEventListenerとは？
まずは基本から。addEventListener は、特定のHTML要素に対して「この動作が起きたときに、こういう処理をしてね」と登録するためのメソッドです。
基本構文
要素.addEventListener("イベント名", 実行する処理);
例：ボタンをクリックしたらアラートを出す
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
alert("ボタンがクリックされました！");
});
ここで重要なのが「イベント名」です。click や mouseover など、ユーザーの操作に応じていろいろな種類があります。
全体をつかみやすいように、代表的なイベントを表にまとめました。
イベントの種類ごとの解説と実務での使い方
1. マウス関連イベント
Webデザインでは一番多く使うジャンルです。
ボタンやナビゲーションメニューなど、ユーザーが「触れる」瞬間を検知します。
click
- 最も基本的なイベント
- ボタンやリンクに設定して「動き」をつける
mouseover / mouseout
- ホバー時の見た目変化に使える
- CSSの
:hoverでもできるが、JavaScriptなら複雑な動きが可能
2. キーボード関連イベント
フォームやショートカット操作を考えると必須です。
keydown / keyup
- 入力フォームの動的チェックに便利
keydownは押した瞬間、keyupは離した瞬間
3. フォーム関連イベント
| フォームイベント | |
| submit | フォームが送信されたとき |
| change | 入力、テキストエリア、セレクトボックスの内容が変更されたとき |
| input | 入力フィールドの内容が変更されたとき（changeよりも細かく反応） |
| focus | 要素がフォーカスを受けたとき |
| blur | 要素がフォーカスを失ったとき |
| reset | フォームがリセットされたとき |
Web制作では絶対に使うシーンが多いジャンル。
input
- 入力中にリアルタイムで反応
- バリデーションや文字数カウントに便利
change
- 選択肢を変更したときに発火
- プルダウンやラジオボタンに向いている
submit
- フォーム送信時に一度だけ動く
- バリデーションや「本当に送信していいですか？」の確認に必須
4. ページや画面に関するイベント
| ウィンドウイベント | |
| load | ページが読み込まれたとき |
| resize | ウィンドウのサイズが変更されたとき |
| scroll | ページや要素がスクロールされたとき |
| unload | ページがアンロードされたとき （廃止予定、beforeunloadを使用） |
| beforeunload | ページがアンロードされる前 |
load
- ページや画像が完全に読み込まれたタイミング
- 初期アニメーションやローディング画面の制御に利用
scroll
- スクロールを検知して、アニメーションや「トップへ戻る」ボタンを表示
- パフォーマンス対策として throttle（間引き処理） がよく使われる
resize
- ウィンドウサイズが変わったとき
- レスポンシブ対応で必要な場面がある
安くてしっかり学べるunazuki。質問システムがないため独学式なのがネックだが細かく教えてくれているので躓きは少ない。スキマ時間学習用の補助コンテンツunazukiポケットと、完全解説スニペット集付き。
その他でよく使われるイベント一覧
初心者がつまずきやすいポイント
- イベント名のスペルミス
- “clic” では動かない → “click” が正解
- 関数を直接実行してしまう
// ❌ 間違い（すぐ実行されてしまう） btn.addEventListener("click", showMessage()); // ✅ 正しい（関数を渡す） btn.addEventListener("click", showMessage); - 似ているイベントの違い
inputとchangeの違いは初心者が混乱しやすいポイントinputはリアルタイム、changeは確定時
実務でのおすすめ活用シーン
- ナビゲーションメニューの開閉 → click
- ホバー時のリッチエフェクト → mouseover / mouseout
- 検索フォームの候補表示 → keyup + input
- アンケートやチェックボックス → change
- スクロールアニメーション → scroll
- ウィンドウ幅でデザイン調整 → resize
これらを組み合わせることで、より「動きのある」「ユーザーに優しい」Webサイトが作れます。
まとめ
addEventListenerは「要素 + イベント + 処理」を結びつける大切な仕組み- イベントにはマウス、キーボード、フォーム、ページ関連などがある
- 似たイベントの違いを理解すると、使い分けがスムーズになる
- 実務では「ユーザーが触れる瞬間」を想定して使うと効果的
この記事を読んだあなたが、
「クリックしたらこんな動きを入れたい！」
「フォームでリアルタイムにチェックしたい！」
と自然に思えるようになれば、もうWebデザイナーとして一歩レベルアップです✨
しっかり学びたいならコチラ。お値段以上の学びがある！買い切りです。
こちらもしっかり学べますが、Web制作全般を知りたい人用なので、必要に感じれば安めの値段設定です。
