2026年5月12日
addEventListenerとは
addEventListener（アドイベントリスナー）は、HTML要素に「イベント（クリック、キー入力など）が起きたとき実行する処理」を登録するメソッドです。
「ボタンをクリックしたら〜する」「テキストを入力したら〜する」など、Webアプリのインタラクション（操作への反応）はほぼすべて addEventListener で作ります。
この記事では、よく使うイベントの種類をまとめてコード例とともに解説します。JavaScriptイベント入門で基本概念を確認。DOM操作で要素の取得方法を学べます。
基本構文
addEventListener の書き方は次のとおりです。
// 基本的な使い方
// element.addEventListener("イベント名", 関数);
const button = document.getElementById("myBtn");
// ① 関数を直接書く方法（アロー関数）
button.addEventListener("click", () => {
alert("クリックされました！");
});
// ② 関数を別に定義して渡す方法
function handleClick() {
alert("クリックされました！");
}
button.addEventListener("click", handleClick); // ()は書かない！⚠️ よくあるミス：関数に () をつけてしまう
addEventListener("click", handleClick()) のように () をつけると、「クリックしたとき実行する」のではなく「addEventListener を呼んだ瞬間に実行」してしまいます。関数を渡すときは handleClick のように () なしで書きましょう。
マウスイベント
マウス操作に反応するイベントです。ボタンのクリックやホバー（マウスを乗せる）効果を作るときに使います。
| イベント名 | 発火タイミング |
|---|---|
click | クリックしたとき |
dblclick | ダブルクリックしたとき |
mouseover | マウスが要素に乗ったとき |
mouseout | マウスが要素から離れたとき |
mousedown | マウスボタンを押したとき |
mouseup | マウスボタンを離したとき |
const box = document.getElementById("box");
// クリックしたとき
box.addEventListener("click", () => {
box.style.backgroundColor = "red";
});
// マウスが乗ったとき
box.addEventListener("mouseover", () => {
box.style.backgroundColor = "yellow";
console.log("マウスが乗りました");
});
// マウスが離れたとき
box.addEventListener("mouseout", () => {
box.style.backgroundColor = ""; // 元に戻す
console.log("マウスが離れました");
});
// ダブルクリック
box.addEventListener("dblclick", () => {
alert("ダブルクリック！");
});キーボードイベント
キーボード操作に反応するイベントです。「Enterキーで送信」「Escapeキーでキャンセル」などのショートカットを実装するときに使います。
| イベント名 | 発火タイミング |
|---|---|
keydown | キーを押したとき |
keyup | キーを離したとき |
押されたキーは event.key で取得できます。例: if (event.key === "Enter")
const input = document.getElementById("myInput");
// キーを押したとき
input.addEventListener("keydown", (event) => {
console.log("押されたキー:", event.key);
// Enterキーが押されたとき
if (event.key === "Enter") {
console.log("Enterが押されました！");
console.log("入力値:", input.value);
}
// Escapeキーが押されたとき
if (event.key === "Escape") {
input.value = ""; // 入力をクリア
}
});
// キーを離したとき（入力値をリアルタイムに使いたいならkeyupの方が正確）
input.addEventListener("keyup", (event) => {
console.log("現在の入力:", input.value);
});フォームイベント
フォームの入力・送信に関するイベントです。お問い合わせフォームや検索ボックスを作るときによく使います。
| イベント名 | 発火タイミング |
|---|---|
submit | フォーム送信時 |
change | 値が確定したとき（フォーカスが外れたとき） |
input | 値が変わるたび（リアルタイム） |
focus | 要素にフォーカスが当たったとき |
blur | 要素からフォーカスが外れたとき |
submitイベントでは event.preventDefault() でページ遷移（送信後のリロード）を防ぐのが定番です。これを書かないと、フォーム送信のたびにページが更新されてしまいます。
const form = document.getElementById("myForm");
const nameInput = document.getElementById("nameInput");
// フォームを送信したとき
form.addEventListener("submit", (event) => {
event.preventDefault(); // ← ページ遷移（リロード）を防ぐ！必須！
const name = nameInput.value;
if (name === "") {
alert("名前を入力してください");
return;
}
alert("こんにちは、" + name + "さん！");
});
// 入力のたびにリアルタイムで処理（inputイベント）
nameInput.addEventListener("input", (event) => {
console.log("現在の値:", event.target.value);
});
// フォーカスが当たったとき
nameInput.addEventListener("focus", () => {
nameInput.style.borderColor = "blue";
});
// フォーカスが外れたとき
nameInput.addEventListener("blur", () => {
nameInput.style.borderColor = "";
});ウィンドウイベント
ブラウザウィンドウ全体に関するイベントです。スクロール量に応じてボタンを表示/非表示にするなど、ページ全体の動きを制御するときに使います。
| イベント名 | 発火タイミング |
|---|---|
load | ページ読み込み完了時 |
resize | ウィンドウサイズ変更時 |
scroll | スクロール時 |
// ページが読み込まれたとき
window.addEventListener("load", () => {
console.log("ページの読み込み完了！");
});
// ウィンドウのサイズが変わったとき
window.addEventListener("resize", () => {
console.log("幅:", window.innerWidth, "高さ:", window.innerHeight);
});
// スクロールしたとき
window.addEventListener("scroll", () => {
const scrollY = window.scrollY; // スクロール量（ピクセル）
console.log("スクロール量:", scrollY);
// 100px以上スクロールしたら「トップに戻る」ボタンを表示
const topBtn = document.getElementById("topBtn");
if (scrollY > 100) {
topBtn.style.display = "block";
} else {
topBtn.style.display = "none";
}
});イベント委譲（Event Delegation）
子要素が多い場合（リストのアイテムが100個あるなど）、一つひとつの要素にイベントを登録するのは効率が悪いです。
そこで使うのがイベント委譲（いべんといじょう）というテクニックです。親要素に1つだけイベントを登録し、event.target でどの子要素がクリックされたかを判定します。
// 子要素が多い場合の効率的な方法：イベント委譲（Event Delegation）
const list = document.getElementById("itemList");
// 親要素に1つだけイベントを登録する
list.addEventListener("click", (event) => {
// event.target = 実際にクリックされた要素
if (event.target.tagName === "LI") {
console.log("クリックされたアイテム:", event.target.textContent);
event.target.style.color = "red";
}
});
// 新しく追加した要素にも自動で対応できる！
const newItem = document.createElement("li");
newItem.textContent = "新しいアイテム";
list.appendChild(newItem); // この要素もクリックで反応するイベント委譲のメリットは2つあります。
- イベントの登録が1回で済むのでパフォーマンスが良い
- 後から動的に追加した要素にも自動で対応できる
JavaScript入門で基礎を確認。関数の書き方でコールバック関数を理解。スコープでイベント内の変数の扱いを学びましょう。
removeEventListenerでイベントを解除する
登録したイベントを解除するには removeEventListener を使います。
// removeEventListener の使い方
function handleClick() {
console.log("クリック！");
}
const button = document.getElementById("btn");
// イベントを登録
button.addEventListener("click", handleClick);
// イベントを解除（同じ関数名を指定する必要がある）
button.removeEventListener("click", handleClick);
// ⚠️ アロー関数を直接書いた場合は解除できない
button.addEventListener("click", () => {
console.log("これは解除できない");
});💡 アロー関数を直接書いた場合は解除できない
アロー関数を直接書くと、removeEventListener で同じ関数を指定できないため解除できません。解除が必要なイベントは、関数に名前をつけて登録しましょう。
実際に書いてみよう
クリックするたびに色が変わり、クリック回数をカウントするボックスを作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントの練習</title>
<style>
#colorBox {
width: 200px;
height: 200px;
background-color: #0d9488;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
cursor: pointer;
border-radius: 8px;
transition: background-color 0.3s;
}
</style>
</head>
<body>
<div id="colorBox">クリックしてね</div>
<p id="message">まだクリックされていません</p>
<script>
const box = document.getElementById("colorBox");
const message = document.getElementById("message");
let count = 0;
box.addEventListener("click", () => {
count++;
box.style.backgroundColor = "#f59e0b";
message.textContent = count + "回クリックされました！";
setTimeout(() => {
box.style.backgroundColor = "#0d9488";
}, 500);
});
box.addEventListener("mouseover", () => {
box.textContent = "✨ クリック！";
});
box.addEventListener("mouseout", () => {
box.textContent = "クリックしてね";
});
</script>
</body>
</html>このコードをHTMLファイルとして保存してブラウザで確認しましょう。マウスのホバー・クリックでさまざまな反応が起きます。
まとめ
- ✅ 基本構文:
element.addEventListener("イベント名", 関数) - ✅ 関数を渡すとき
()をつけない - ✅ マウス:
click,mouseover,mouseout - ✅ キーボード:
keydown,keyup（event.keyで判定） - ✅ フォーム:
submit,input,change（submitはpreventDefaultを忘れずに） - ✅ イベント委譲で子要素が多いリストを効率的に管理
あわせて読みたい記事
- JavaScriptイベント入門 — イベントの基本概念
- JavaScript DOM操作入門 — 要素の取得と操作
- JavaScript関数入門 — コールバック関数の理解
- JSが動かない時のチェックリスト — トラブル解決
- JavaScriptとは？初心者向け解説 — JS基礎に戻る