【JavaScript】イベントハンドラを複数登録する方法と注意点

JavaScriptでボタンをクリックしたときや入力欄に文字を入力したときなど、ユーザーの操作に応じて処理を実行するには「イベントハンドラ」を使います。
しかし、いざ複数の処理をひとつのイベントに結びつけようとすると、「前に設定した処理が消えてしまった！」といった戸惑いを経験した方も多いのではないでしょうか。

本記事では、JavaScriptで複数のイベントハンドラを同じ要素に設定する方法について、初心者にも分かりやすく解説していきます。
onclick と addEventListener の違いから、複数ハンドラを正しく扱うための実践的なテクニックまで、順を追ってご紹介します。

初めてITに触れる方々のために、学習を助ける良書もご紹介しております。もしご興味があれば、そちらにも目を通していただければ嬉しく思います。

プログラミング初心者・新人におすすめの本５選【IT企業で実際に読んで役立った】

IT企業で働く現役エンジニアが、新人時代に読んで役立ったプログラミング本を5冊厳選して紹介。初心者にもおすすめの良書を、実体験をもとに丁寧に解説します。

イベントハンドラとは？
addEventListener を使った複数設定
onclick プロパティによる設定は単一のみなので注意
まとめ

イベントハンドラとは？

「イベント」とは、ユーザーの操作やブラウザ上で発生する出来事のことを指します。たとえば、ボタンがクリックされたとき（click）、フォームに入力されたとき（input）、マウスが要素の上に乗ったとき（mouseover）などがイベントにあたります。

そして、「イベントハンドラ」とは、これらのイベントが発生したときに実行される処理（関数）のことです。

const button = document.getElementById("myButton");
button.onclick = () => {
  alert("ボタンがクリックされました！");
};

このようにして、ユーザーの操作に対して動的に反応するインタラクティブなWebページを作ることができます。

addEventListener を使った複数設定

複数のイベントハンドラを同じ要素に登録したい場合には、addEventListener を使うのが一般的です。
このメソッドを使えば、同じイベントに対して複数の処理を登録することができます。

基本的な使い方

以下のように、addEventListener を使って同じイベントに複数の関数を登録できます。

const button = document.getElementById("myButton");

button.addEventListener("click", () => {
  console.log("処理A");
});

button.addEventListener("click", () => {
  console.log("処理B");
});

このコードを実行してボタンをクリックすると、以下のように２つの処理が順番に実行されます。

処理A  
処理B

実行順について

addEventListener で登録されたイベントハンドラは、登録された順番に実行されます。
つまり、先に登録した処理が先に実行され、後に登録したものはそのあとに実行されます。

onclick プロパティによる設定は単一のみなので注意

JavaScriptでは、HTML要素に対して直接イベントハンドラを設定する方法として、onclick プロパティを使うことができます。例えば次のように記述します。

const button = document.getElementById("myButton");
button.onclick = () => {
  console.log("クリックされました！");
};

この方法はシンプルでわかりやすいですが、onclick は１つの処理しか登録できないという制限があります。

たとえば、以下のように２回設定してみましょう。

button.onclick = () => {
  console.log("処理A");
};

button.onclick = () => {
  console.log("処理B");
};

この場合、2回目の設定（処理B）で上書きされてしまい、1回目に設定した処理Aは実行されなくなります。実行結果は以下のとおりです。

処理B

このように、onclick プロパティを使うと常に最後に設定したハンドラだけが有効になります。そのため、複数のイベントハンドラを同じ要素に登録したい場合には、onclick ではなく addEventListener を使う必要があります。

まとめ

JavaScriptでイベントハンドラを設定する方法には、onclick プロパティと addEventListener の2つがあります。
onclick は手軽ですが、1つの処理しか登録できず、上書きされてしまうという制限があります。

一方、addEventListener を使えば、同じイベントに対して複数の処理を登録することができ、より柔軟な実装が可能になります。
ただし、イベントの解除を行いたい場合は、名前付き関数や変数に代入した関数を使うことが重要です。無名関数では解除ができません。

実際の開発では、イベントハンドラを整理・管理しやすいように構造化し、必要に応じてイベントの追加・削除ができるような設計を心がけると、保守性の高いコードになります。

「複数のイベント処理をうまく共存させたい」「あとから柔軟に管理したい」というときは、ぜひ addEventListener の活用を検討してみてください。