イベントリスナーとイベントハンドラ、どちらを使うべき？―新人エンジニアのための使い分けガイド コピー

2025年6月11日 最終更新日時 : 2025年6月11日 山崎講師山崎講師
icon8

こんにちは。ゆうせいです。

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）の活用法：クリック位置や対象要素を取得
  • イベントの伝播（バブリングとキャプチャリング）：親子関係の制御

コードを書く量が増えるほど、「正しいイベントの扱い方」は大切になってきます。

だからこそ今のうちに、「イベントリスナーを基本にしよう」と覚えておきましょう！

セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク

投稿者プロフィール

山崎講師
山崎講師代表取締役
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
対象読者
山崎講師、新入社員
前の記事
textContent、innerText、innerHTMLの違いを完全比較！―初心者エンジニアのためのやさしい解説New!!
2025年6月11日
次の記事
textContent、innerText、innerHTMLの違いを完全比較！―初心者エンジニアのためのやさしい解説 コピーNew!!
2025年6月11日