イベントリスナーとイベントハンドラ、どちらを使うべき？―新人エンジニアのための使い分けガイド
山崎講師
こんにちは。ゆうせいです。
Web制作やJavaScriptの学習を進めていると、「イベントリスナー」と「イベントハンドラ」という言葉に出会いますよね。
たとえば、ボタンをクリックしたときの処理をどう書くか、という話。
でもこんな疑問、持ったことありませんか？
「addEventListenerとonclick、何が違うの？」「どっちを使えばいいの？」
この2つは似ているようで、実は明確な違いがあり、場面によって使い分けが必要なんです。
イベントリスナーとイベントハンドラの違いとは？
イベントハンドラ：簡単に書けるけど上書きされる
button.onclick = function () {
alert('クリックされました');
};
このように、要素のプロパティ（ここでは onclick）に関数を代入する方法を「イベントハンドラ」といいます。
特徴：
- 書き方が簡単で初心者にもわかりやすい
- 1つのイベントに1つの処理しか設定できない（上書きされてしまう）
button.onclick = function () {
alert('A');
};
button.onclick = function () {
alert('B');
}; // Aの処理は消えて、Bだけが動く
これはちょっと不便ですよね？
イベントリスナー：柔軟に複数処理を追加できる
button.addEventListener('click', function () {
alert('クリックA');
});
button.addEventListener('click', function () {
alert('クリックB');
});
このようにイベントに「リスナー（聴き手）」を追加するのが addEventListener。複数の処理を「リスト」にして登録できます。
特徴：
- 同じイベントに複数の処理を追加できる
- イベントの取り消し（removeEventListener）も可能
- キャプチャやバブリングの制御ができる（少し上級者向け）
なぜイベントリスナーを使うべき場面が多いのか？
1. 拡張性・保守性に優れている
プロジェクトが大きくなると、「ここにも処理追加して」「あのイベントのときだけ一時的に何かしたい」などの要望が増えてきます。
そんなとき addEventListener で書かれていれば、既存のコードを壊さずに追加できます。
2. 外部ライブラリとの相性がいい
たとえば、jQueryなどのライブラリも addEventListener に近い構造でイベントを扱っています。慣れておくと他のツールも使いやすくなります。
図で理解しよう！違いを視覚化
イベント：click
┌────────────┐
│ onclick │ ← 1つしか設定できない（上書き）
└────────────┘
イベント：click
┌────────────┐
│ addListener │ ← いくつでも追加できる（重ねられる）
│ addListener │
│ addListener │
└────────────┘
実例比較：同じ処理を2つ登録したいとき
NGな例（イベントハンドラ）
button.onclick = function () {
console.log('処理A');
};
button.onclick = function () {
console.log('処理B');
}; // 処理Aは消える
OKな例（イベントリスナー）
button.addEventListener('click', function () {
console.log('処理A');
});
button.addEventListener('click', function () {
console.log('処理B');
}); // 両方とも動く！
じゃあイベントハンドラは使わなくていいの？
いえいえ、場面によってはイベントハンドラが便利なこともあります。
たとえば：
- サンプルコードや簡単なUIのデモ
- すでに1つの動作だけあれば良いと決まっている処理
イベントハンドラは、簡潔に書けるので、初心者が最初に使うにはぴったりです。
まとめ：新人エンジニアへのアドバイス
| 観点 | イベントハンドラ（onclick） | イベントリスナー（addEventListener） |
|---|---|---|
| 同一イベントに複数登録 | 不可 | 可能 |
| 書きやすさ | ◎ | ○ |
| 柔軟性 | △ | ◎ |
| プロジェクト向き | 小規模 | 中〜大規模 |
| おすすめ度 | 学習初期 | 実務・応用 |
今後の学習の道しるべ
次は、以下の内容を学んでおくとレベルアップできます！
- removeEventListenerの使い方：イベントを解除する方法
- イベントオブジェクト（event）の活用法：クリック位置や対象要素を取得
- イベントの伝播（バブリングとキャプチャリング）：親子関係の制御
コードを書く量が増えるほど、「正しいイベントの扱い方」は大切になってきます。
だからこそ今のうちに、「イベントリスナーを基本にしよう」と覚えておきましょう！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール