MENU
  1. HOME
  2. JavaScript
  3. 【JavaScript】addEventListenerについて
JavaScript - 2025-08-04

【JavaScript】addEventListenerについて

Hatena Pocket LINE

現代のウェブサイトは、ユーザーの操作に動的に反応することで、リッチでインタラクティブな体験を提供しています。このインタラクティブ性の根幹を支えるのが、JavaScriptのaddEventListenerメソッドです。このメソッドを使うことで、HTML要素に対して特定のイベント（クリック、キー入力、ページの読み込みなど）が発生した際に、任意のJavaScriptコードを実行させることができます。

1. addEventListenerって何？

addEventListenerは、ウェブサイトの部品（ボタン、画像、ページ全体など）に「もし〇〇が起きたら、△△という動きをしてね」と指示を出すための魔法の呪文のようなものです。

基本の書き方

// target（対象の要素）に、type（イベントの種類）が起きたら、listener（実行するプログラム）を動かす
target.addEventListener(type, listener, options);
  • target: 指示を出したいウェブサイトの部品（例：ボタン、リンク、ページ全体など）。
  • type: どんな「出来事」（イベント）を監視するか。例えば「クリックされたら」なら'click'、「ページが読み込まれたら」なら'load'など。
  • listener: その出来事が起きたときに、実際に動かしたいJavaScriptのプログラム（関数）のこと。
  • options (おまけの設定): イベントの動きを細かく調整するための設定。例えば「一度だけ実行したら終わり」とか「特定のタイミングでだけ反応する」といった指示ができます。

2. どんな「出来事」（イベント）に反応できるの？

ウェブサイトには、ユーザーの様々な動きに対応するためのたくさんの「イベント」が用意されています。よく使うものをいくつか見てみましょう。

ページが準備できたとき

DOMContentLoaded

ウェブページの中身（HTMLの文字や構造）が読み込まれて、JavaScriptで操作できる状態になったときに発生します。まだ画像や動画などの大きなファイルは読み込み途中でも、すぐに動きをつけたい場合に便利です。

document.addEventListener('DOMContentLoaded', () => {
    console.log('ウェブページの中身が準備できました！');
    // ここでページ内の文字やボタンなどを操作するプログラムを書けます
    const welcomeMessage = document.getElementById('welcome');
    if (welcomeMessage) {
        welcomeMessage.textContent = 'ようこそ！準備完了です！';
    }
});

load

ウェブページの中身だけでなく、ページ内のすべての画像、動画、スタイルシートなど、すべてのファイルが完全に読み込まれて表示されたときに発生します。ページ全体が完全に表示されてから何かをしたい場合に利用します。

window.addEventListener('load', () => {
    console.log('ページ内のすべてのものが読み込み終わりました！');
    // ページ全体の表示が完了した後に実行したい特別な処理
});

マウスの動きに反応するイベント

click

マウスのボタンが「カチッ」とクリックされたときに発生します。ボタンを押したり、リンクをタップしたりする、一番よく使うイベントです。

const myButton = document.getElementById('myButton');
myButton.addEventListener('click', () => {
    alert('ボタンが押されましたね！');
});

mousedown/mouseup

マウスのボタンを「押した瞬間」（mousedown）と、「離した瞬間」（mouseup）に発生します。例えば、ドラッグ＆ドロップ機能を作る時など、クリックよりも細かいマウスの動きを捉えたいときに使います。

onst draggableBox = document.getElementById('draggableBox');
draggableBox.addEventListener('mousedown', (event) => {
    console.log('箱を掴みました！');
});

mousemove

マウスカーソルが要素の上を「スーッ」と移動するたびに発生します。マウスの動きに合わせて何かを動かしたり、ゲームの操作などでカーソルの位置を常に知りたいときに使います。

const drawingArea = document.getElementById('drawingArea');
drawingArea.addEventListener('mousemove', (event) => {
    console.log(`マウスの位置：X座標 ${event.clientX}, Y座標 ${event.clientY}`);
});

mouseover/mouseout

マウスカーソルが要素の「上に入ったとき」（mouseover）と、「外に出たとき」（mouseout）に発生します。例えば、マウスを乗せると色が変わるボタンや、説明文が表示されるツールチップなどに使われます。

onst hoverCard = document.getElementById('hoverCard');
hoverCard.addEventListener('mouseover', () => {
    hoverCard.style.backgroundColor = 'lightyellow'; // マウスが乗ったら黄色に
});
hoverCard.addEventListener('mouseout', () => {
    hoverCard.style.backgroundColor = 'white'; // マウスが離れたら白に
});

キーボードの動きに反応するイベント

keydown

キーボードのキーが「押された瞬間」に発生します。キーを押しっぱなしにすると、このイベントも繰り返し発生します。ゲームのキャラクター操作や、特定のキーを押したときに何かを実行したい場合に便利です。

document.addEventListener('keydown', (event) => {
    console.log(`「${event.key}」キーが押されました！`);
    if (event.key === 'Enter') {
        console.log('エンターキーが押されましたね！');
    }
});

keyup

キーボードのキーが「離された瞬間」に発生します。

document.addEventListener('keyup', (event) => {
    console.log(`「${event.key}」キーが離されました。`);
});

keypress

文字を生成するキーが押され、離されるまでの間に発生します。
非推奨であり、代わりにkeydownやkeyup、またはinputイベントの使用が推奨されます。

フォーム（入力欄など）のイベント

change

入力欄や選択肢（ドロップダウンなど）の値が変更され、かつその入力欄からフォーカスが外れたときに発生します。

onst colorSelect = document.getElementById('colorSelect');
colorSelect.addEventListener('change', (event) => {
    console.log(`選ばれた色：${event.target.value}`);
});

submit

フォーム（入力欄の集まり）が「送信」されたときに発生します。フォームのバリデーションやAjax送信を行う際によく利用されます。event.preventDefault()を使うと、通常のフォーム送信（ページが再読み込みされる動作）を止めることができます。

const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', (event) => {
    event.preventDefault(); // フォームの通常の送信をストップ！
    console.log('お問い合わせフォームが送信されました（でもページは変わりません）。');
    // ここで、入力内容をチェックしたり、サーバーにデータを送ったりする処理を書きます
});

input

入力欄（テキストボックスなど）にユーザーが文字を入力するたびに、リアルタイムで発生します。文字数カウンターや、入力内容に応じてすぐにヒントを表示したい場合などに使います。

const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('input', (event) => {
    console.log(`現在の検索ワード：${event.target.value}`);
});

その他の便利なイベント

scroll

ウェブページや特定の要素がスクロールされたときに発生します。無限スクロールや、スクロールに応じて要素の表示を切り替えるなどのエフェクトに利用します。

window.addEventListener('scroll', () => {
    const scrolledAmount = window.scrollY; // どれくらいスクロールしたか
    if (scrolledAmount > 300) {
        console.log('300ピクセル以上スクロールしました！');
    }
});

resize

ブラウザのウィンドウのサイズが変更されたときに発生します。ウェブサイトのデザインを画面サイズに合わせて調整する（レスポンシブデザイン）際などに、JavaScriptで要素の配置を変えたいときに使います。

window.addEventListener('resize', () => {
    console.log(`ウィンドウの新しいサイズ：幅 ${window.innerWidth}px, 高さ ${window.innerHeight}px`);
});

3. イベントオブジェクトって何？（イベントの詳細情報）

イベントリスナー関数には、イベントが起きたときに自動的に「Eventオブジェクト」という特別な情報が渡されます。
このEventオブジェクトには、どんなイベントが、どこで、どのように起きたか、といった詳しい情報がたくさん詰まっています。

よくプロパティとメソッド

  • event.target:
    実際にイベントが起きた「犯人」（要素）です。例えば、リストの中の特定の項目をクリックした場合、event.targetはそのクリックされたリスト項目になります。
  • event.currentTarget:
    イベントリスナーが「設定されている場所」（要素）です。イベントが親から子へ、または子から親へと伝わる途中で、どの要素に設定されたリスナーが反応したかを示します。
  • event.preventDefault():
    イベントが本来持っている「デフォルトの動作」をキャンセルする命令です。例えば、リンクをクリックするとページが移動しますが、event.preventDefault()を使うと、その移動を止めることができます。フォームの送信を止めたりするのにも使います。
  • event.stopPropagation():
    イベントが他の要素に「伝わっていくのを止める」命令です。イベントは通常、親や子要素にも伝わっていきますが、これを呼ぶとそこでストップします。
const myLink = document.getElementById('myLink');
myLink.addEventListener('click', (event) => {
    event.preventDefault(); // リンクの通常のページ移動をキャンセル！
    console.log('リンクがクリックされましたが、どこにも移動しません。');
    console.log('実際にクリックされた要素:', event.target);
    console.log('このイベントリスナーが設定されている要素:', event.currentTarget);
});

4. イベントの伝わり方（バブリングとキャプチャリング）

ウェブサイトの要素は、親子関係でつながっています。イベントが起きると、そのイベントはまるで波紋のように、要素間を伝わっていきます。この伝わり方には2つの方向があります。

  1. キャプチャリング（Capture）:
    イベントがページの「一番上」（window）から、実際にイベントが起きた要素（ターゲット）に向かって「下へ」伝わっていくフェーズです。
  2. バブリング（Bubble）:
    イベントが実際にイベントが起きた要素（ターゲット）から、ページの「一番上」（window）に向かって「上へ」伝わっていくフェーズです。ほとんどのイベントは、このバブリングフェーズで処理されます。

addEventListenerの3番目の引数（options）で{ capture: true }と設定すると、キャプチャリングフェーズでイベントを捉えることができます。設定しない場合は、デフォルトでバブリングフェーズで処理されます。

// HTML構造: grandParent > parent > child

const grandParent = document.getElementById('grandParent');
const parent = document.getElementById('parent');
const child = document.getElementById('child');

// キャプチャリングフェーズで反応するリスナーを設定
grandParent.addEventListener('click', () => console.log('GrandParent (キャプチャリング)'), { capture: true });
parent.addEventListener('click', () => console.log('Parent (キャプチャリング)'), { capture: true });
child.addEventListener('click', () => console.log('Child (キャプチャリング)'), { capture: true });

// バブリングフェーズで反応するリスナーを設定 (デフォルト)
grandParent.addEventListener('click', () => console.log('GrandParent (バブリング)'));
parent.addEventListener('click', () => console.log('Parent (バブリング)'));
child.addEventListener('click', () => console.log('Child (バブリング)'));

// もし「child」要素をクリックすると、コンソールには以下の順序でメッセージが表示されます:
// GrandParent (キャプチャリング)
// Parent (キャプチャリング)
// Child (キャプチャリング)
// Child (バブリング)
// Parent (バブリング)
// GrandParent (バブリング)

5. イベント委譲（Event Delegation）：賢くイベントを管理する

イベント伝播の仕組みを上手に利用したテクニックが「イベント委譲」です。これは、たくさんの似たような子要素（例えば、リストの項目がたくさんある場合）それぞれにイベントリスナーを設定する代わりに、それらをまとめて囲んでいる「親要素」に一つだけイベントリスナーを設定する方法です。

例えるなら、クラスの生徒一人ひとりに先生が指示を出すのではなく、クラスの代表者（親要素）にだけ指示を出して、代表者が他の生徒（子要素）に伝えるようなものです。

イベント委譲のいいところ

  • ウェブサイトが速くなる: たくさんのリスナーを設定する手間が省けるので、ウェブサイトの動きが軽くなります。
  • メモリの節約: 必要なリスナーの数が減るので、コンピューターのメモリをあまり使いません。
  • 後から追加された要素にも対応: 新しい要素が後から追加されても、親要素のリスナーが自動的にそれらを監視してくれるので、追加で設定する必要がありません。

活用例

// HTML: <ul id="myList"><li>アイテム1</li><li>アイテム2</li></ul>

const shoppingList = document.getElementById('myList'); // 親要素（買い物リスト全体）

shoppingList.addEventListener('click', (event) => {
    // クリックされたのがリストの項目（LIタグ）かどうかを確認
    if (event.target.tagName === 'LI') {
        console.log(`「${event.target.textContent}」がクリックされました！`);
        event.target.style.backgroundColor = 'lightgreen'; // クリックされた項目だけ色を変える
    }
});

// 後から新しい項目を追加しても、自動的にクリックに反応します
const newItem = document.createElement('li');
newItem.textContent = '新しいアイテム';
shoppingList.appendChild(newItem);

6. removeEventListener：イベントの監視をやめる

addEventListenerで設定したイベントリスナーは、もう必要なくなったらremoveEventListenerを使って「監視をやめる」ことが大切です。これをしないと、ウェブサイトの動きが重くなったり、予期せぬ問題が起きたりすることがあります（メモリリークなど）。

基本の書き方

// target（対象の要素）から、type（イベントの種類）とlistener（実行するプログラム）の監視をやめる
target.removeEventListener(type, listener, options);

addEventListenerで設定したときと全く同じtype、listener、optionsを指定する必要があります。特に、listenerには、無名の関数（その場で書いた関数）ではなく、名前をつけた関数や変数に入れた関数を使う必要があります。

const myButton = document.getElementById('myButton');

// 名前をつけた関数を用意
function handleButtonClick() {
    console.log('ボタンがクリックされました！');
    // このボタンは一度クリックされたら、もう反応しないようにする
    myButton.removeEventListener('click', handleButtonClick);
    console.log('もうこのボタンはクリックに反応しません。');
}

// ボタンにクリックイベントを設定
myButton.addEventListener('click', handleButtonClick);

// あるいは、5秒後に自動的に監視をやめる場合
setTimeout(() => {
    myButton.removeEventListener('click', handleButtonClick);
    console.log('5秒経ったので、ボタンのクリック監視をやめました。');
}, 5000); // 5000ミリ秒 = 5秒

まとめ

addEventListenerは、JavaScriptを使ってウェブサイトをユーザーの操作に反応させるための、非常に強力で柔軟な道具です。どんなイベントがあるのかを知り、イベントが持っている情報（Eventオブジェクト）を上手に使うことで、ユーザーのどんな動きにも細かく対応できるウェブサイトを作ることができます。

また、イベントが要素間をどう伝わるか（イベント伝播）を理解し、「イベント委譲」のような賢いテクニックを使うことで、ウェブサイトの動きを軽くし、管理しやすくすることも可能です。そして、必要なくなったイベントリスナーはきちんと「監視をやめる」（removeEventListener）ことで、ウェブサイトを常に快適に保つことができます。

Hatena Pocket LINE

Prev

EC-CUBEのお問い合わせフォームにテキストエリアを追加する方法

Next

CSSのアニメーションを検知してJavaScriptで制御する方法
Related Posts

Related Posts

ロードアニメーション表示中のスクロールをJavaScriptで禁止する方法

2022-01-25

JavaScriptのDOM操作解説

2025-07-25

gulp-ejsでdestする際に拡張子をejsからhtmlに変更する方法

2018-01-08

JavaScript スムーズな遷移アニメーションが実装できるモーダル「Blendy」の使い方

2025-08-07

slick.jsにオートプレイの切り替えボタンをつける方法

2022-06-22

ScrollyVideo.js の使い方：スクロールに動画を連動させて魅力的なサイトを作る

2025-07-30

Datatables.jsで検索andページングandソート機能を実装

2017-08-01

Node.jsをバージョン管理する方法-Windows・Mac

2019-07-03