Webアプリケーションやサイト制作において、ユーザーがボタンをクリックしたり、入力フォームにテキストを打ち込んだりする動作は日常的に行われています。

これらの動作をプログラム側で検知し、特定の処理を実行させる仕組みが「イベント」と呼ばれる概念です。

プログラミング、特にJavaScriptを用いた開発において、このイベントを扱うために欠かせないのが「イベントハンドラ」と「イベントリスナ」です。

初心者の方にとって、これら二つの言葉は非常に似ているため、どちらを使えば良いのか迷ってしまうことも少なくありません。

本記事では、イベントハンドラとイベントリスナの基本的な仕組みから、具体的な違い、そして現場での使い分けまでを詳しく解説します。

目次 [ close ]
  1. イベントとは何か
  2. イベントハンドラとは
    1. HTML属性としての記述
    2. プロパティとしての記述
  3. イベントリスナとは
    1. 基本的な書き方
    2. 複数の処理を登録できる
  4. イベントハンドラとイベントリスナの違い
  5. イベントが伝わる仕組み：バブリングとキャプチャリング
    1. バブリング（Bubbling）
    2. キャプチャリング（Capturing）
  6. 具体的な実装例：ボタンクリックでのカウンター
  7. イベントリスナの便利なオプション
    1. onceオプション
    2. passiveオプション
  8. イベントリスナの削除
  9. まとめ

イベントとは何か

IT用語における「イベント」とは、システムやブラウザ上で発生した「出来事」を指します。

例えば、ユーザーがマウスでボタンをクリックした、キーボードのキーを押した、画面をスクロールした、といった操作がすべてイベントに該当します。

また、ユーザーの操作だけでなく、ブラウザがWebページの読み込みを完了した（load）という状態の変化もイベントの一つです。

プログラムは、これらのイベントが発生したタイミングを待ち構えており、発生した瞬間にあらかじめ決められた処理を実行します。

このように、何かの出来事をきっかけに処理を動かす仕組みをイベントドリブン（イベント駆動）と呼びます。

イベントハンドラやイベントリスナは、まさにこの「きっかけ」と「処理」を繋ぐための窓口となる存在です。

イベントハンドラとは

イベントハンドラは、特定のイベントが発生した際に実行される関数（処理）のことです。

古くからある手法であり、HTML要素の属性として直接記述するか、JavaScriptのオブジェクトプロパティとして指定します。

HTML属性としての記述

HTMLタグの中に直接「on + イベント名」という属性を記述する方法があります。

例えば、クリックイベントであれば onclick という属性を使用します。

HTML
<!-- ボタンをクリックしたときにアラートを表示する例 -->
<button onclick="alert('クリックされました')">ボタン</button>

この方法は非常にシンプルで直感的ですが、HTMLの中にJavaScriptのロジックが混在してしまうため、保守性の観点からはあまり推奨されません。

プロパティとしての記述

JavaScriptコードの中で、DOM（Document Object Model）要素のプロパティとしてイベントハンドラを設定する方法もあります。

JavaScript
// ボタン要素を取得
const btn = document.getElementById('myButton');

// onclickプロパティに関数を代入
btn.onclick = function() {
    console.log('イベントハンドラが実行されました');
};

この記述方式の最大の特徴は、1つのイベントに対して1つの関数しか登録できない点にあります。

もし同じ要素に対して、別の場所で再び onclick プロパティに別の関数を代入すると、先に設定していた関数は上書きされてしまいます。

イベントリスナとは

イベントリスナは、DOMレベル2で導入された、イベントハンドラよりも柔軟で高機能な仕組みです。

「リスナ（Listener）」という言葉の通り、特定のイベントが発生するのを「耳を澄ませて待機しているもの」というイメージです。

JavaScriptの addEventListener メソッドを使用して登録を行います。

基本的な書き方

イベントリスナを使用する場合、対象となる要素に対してメソッドを呼び出します。

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

// addEventListener(イベント名, 実行する関数)
btn.addEventListener('click', function() {
    console.log('イベントリスナ1が実行されました');
});

イベントハンドラとは異なり、イベント名の前に「on」を付ける必要はありません（click, mouseover, inputなど）。

複数の処理を登録できる

イベントリスナの大きなメリットは、同じ要素の同じイベントに対して、複数の関数を登録できることです。

JavaScript
btn.addEventListener('click', () => console.log('処理A'));
btn.addEventListener('click', () => console.log('処理B'));

このコードを実行すると、ボタンをクリックした際に「処理A」と「処理B」の両方が実行されます。

大規模な開発では、異なるスクリプトファイルから同じ要素に処理を追加したいケースが多いため、この仕組みは非常に重要です。

イベントハンドラとイベントリスナの違い

これら二つの主な違いを整理すると、以下の表のようになります。

比較項目イベントハンドライベントリスナ
主な記述方法onclick = function...addEventListener('click', ...)
複数登録の可否不可（上書きされる）可能
HTMLとの分離混ざりやすい完全に分離可能
詳細設定（オプション）不可可能（キャプチャ、一度限りなど）
削除の容易さnullを代入してクリアremoveEventListenerを使用

現代のWeb開発においては、柔軟性が高く、予期せぬ上書きを防ぐことができる「イベントリスナ」の使用が標準的となっています。

イベントが伝わる仕組み：バブリングとキャプチャリング

イベントリスナを深く理解する上で欠かせないのが、イベントの伝播（プロパゲーション）という概念です。

Webページ上の要素は階層構造（親子関係）になっており、ある要素でイベントが発生すると、その親要素や子要素にもイベントが伝わっていきます。

バブリング（Bubbling）

バブリングは、「発生した要素から親要素へ」とイベントが泡のように上がっていく仕組みです。

例えば、リスト項目（<li>）をクリックすると、その親であるリスト（<ul>）、さらにその親の <div> や <body> にもクリックイベントが伝わります。

デフォルトでは、ほとんどのイベントリスナはこのバブリングフェーズで実行されます。

キャプチャリング（Capturing）

キャプチャリングはバブリングの逆で、「最上位の親要素から発生した要素へ」とイベントが降りてくる仕組みです。

addEventListener の第3引数に true を指定することで、このフェーズでイベントを捕捉することができます。

JavaScript
// キャプチャリングフェーズで実行したい場合
element.addEventListener('click', callback, true);

この伝播の仕組みを理解していると、複数の子要素のイベントを一つの親要素でまとめて管理する「イベントデリゲート」という高度なテクニックが使えるようになります。

具体的な実装例：ボタンクリックでのカウンター

実際にイベントリスナを使って、簡単なカウンターを実装してみましょう。

以下のコードは、ボタンを押すたびに数字が増えていくシンプルなプログラムです。

HTML
<!-- HTML構造 -->
<p>カウント: <span id="count">0</span></p>
<button id="addBtn">増やす</button>
JavaScript
// 要素の取得
const countDisplay = document.getElementById('count');
const addBtn = document.getElementById('addBtn');

let count = 0;

// イベントリスナの登録
addBtn.addEventListener('click', function() {
    count++;
    countDisplay.textContent = count;
    console.log('現在のカウント:', count);
});
実行結果
現在のカウント: 1
現在のカウント: 2
現在のカウント: 3

この例では、addEventListener を使うことで、HTMLを汚さずに動きをつけることができています。

また、後から「クリック時に色を変える」といった別の処理を追加したい場合も、元のコードを書き換えることなく、新しく addEventListener を追加するだけで対応可能です。

イベントリスナの便利なオプション

addEventListener の第3引数には、オブジェクト形式でオプションを渡すことができます。

これにより、従来のイベントハンドラでは実現できなかった細かい制御が可能になります。

onceオプション

once: true を指定すると、そのイベントリスナは一度実行された後に自動的に削除されます。

JavaScript
btn.addEventListener('click', () => {
    console.log('このメッセージは一度しか表示されません');
}, { once: true });

初回クリック時のみ特典を表示する、といった処理に非常に便利です。

passiveオプション

passive: true を指定すると、そのリスナ内で preventDefault()（ブラウザのデフォルト動作のキャンセル）を呼び出さないことを宣言できます。

これはスクロールイベントなどのパフォーマンス改善に大きく寄与します。

スマートフォンのブラウザなどでは、スクロールの滑らかさを維持するためにこのオプションが推奨されています。

イベントリスナの削除

不要になったイベントリスナを放置しておくと、メモリの無駄遣いや予期せぬ動作の原因になることがあります。

特に、ページ遷移を行わないシングルページアプリケーション（SPA）などでは、明示的な削除が重要です。

削除を行うには removeEventListener を使用します。

JavaScript
function handleClick() {
    console.log('クリックされました');
}

// 登録
btn.addEventListener('click', handleClick);

// 削除
btn.removeEventListener('click', handleClick);

注意点として、removeEventListener で削除できるのは、名前のある関数（参照が同じ関数）だけです。

無名関数やアロー関数をその場で記述して登録した場合、それを後から削除することはできないため、削除が必要な場合は必ず関数に名前を付けて定義しておきましょう。

まとめ

イベントハンドラとイベントリスナは、どちらもWebページにインタラクティブな動きを与えるための重要な仕組みです。

イベントハンドラは記述が簡単である反面、1つの要素に1つの処理しか紐付けられないという制約があります。

一方で、現代の主流であるイベントリスナ（addEventListener）は、複数の処理を安全に追加でき、さらに詳細なオプション設定が可能という優れたメリットを持っています。

プログラムの保守性や拡張性を高めるためには、特別な理由がない限りイベントリスナを選択するのがベストプラクティスです。

それぞれの特性と、バブリングなどのイベント伝播の仕組みを理解することで、より高度でユーザーフレンドリーなWebサイトを構築できるようになります。

まずはシンプルなクリックイベントから、イベントリスナの扱いに慣れていくことから始めてみてください。