JavaScriptでaddEventListenerメソッドを使ってイベント処理を追加する7つの方法

●addEventListenerとは
●イベントリスナーの追加と削除
●よくあるエラーと対処法
●addEventListenerの応用例
まとめ

※本記事のコンテンツは、利用目的を問わずご活用いただけます。実務経験10000時間以上のエンジニアが監修しており、基礎知識があれば初心者にも理解していただけるように、常に解説内容のわかりやすさや記事の品質に注力しております。不具合・分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。(理解できない部分などの個別相談も無償で承っております)
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●addEventListenerとは

JavaScriptを学び始めた頃、ボタンをクリックしたり、キー入力を検知したりといった「イベント処理」に悩んだ経験はありませんか？

実は、そんなイベント処理をスムーズに実装できるのが、JavaScriptの強力なメソッドである「addEventListener」なのです。

addEventListenerは、HTML要素に対してイベントを追加するためのメソッドです。

このメソッドを使うことで、ユーザーのアクションに応じて動的にWebページを変化させることができます。

まるで、Webページに命を吹き込むかのように、インタラクティブな動きを実現できるのが、addEventListenerの魅力ですね。

○addEventListenerの基本的な使い方

addEventListenerの基本的な使い方は、とてもシンプルです。

対象となるHTML要素に対して、イベントの種類とイベントが発生した時に実行する関数を指定するだけ。

たとえば、あるボタンをクリックした時にアラートを表示したい場合は、次のようなコードを書きます。

document.getElementById("myButton").addEventListener("click", function() {
  alert("ボタンがクリックされました！");
});

このコードでは、id属性が「myButton」のボタン要素を取得し、そのボタンに対して「click」イベントを追加しています。

ボタンがクリックされた時に、アラートで「ボタンがクリックされました！」というメッセージが表示されるというわけです。

実行結果として、ボタンをクリックすると、「ボタンがクリックされました！」というアラートが表示されます。

○サンプルコード1：クリックイベントの追加

それでは、もう少し具体的なサンプルコードを見てみましょう。

まずは、クリックイベントを追加する例です。

<button id="changeColor">背景色を変更</button>

const changeColorButton = document.getElementById("changeColor");

changeColorButton.addEventListener("click", function() {
  document.body.style.backgroundColor = "skyblue";
});

このコードでは、「changeColor」というidを持つボタンに対して、クリックイベントを追加しています。

ボタンがクリックされると、ページの背景色が「skyblue」に変更されます。

実行結果として、「背景色を変更」ボタンをクリックすると、ページの背景色が空色（skyblue）に変わります。

○サンプルコード2：キー入力イベントの追加

次に、キー入力イベントを追加する例を見てみましょう。

<input type="text" id="myInput">

const myInput = document.getElementById("myInput");

myInput.addEventListener("keydown", function(event) {
  console.log("押されたキー: " + event.key);
});

この例では、idが「myInput」のテキスト入力欄に対して、「keydown」イベントを追加しています。キーが押されると、押されたキーの情報がコンソールに出力されます。

event.keyで、実際に押されたキーを取得することができるのです。

実行結果として、テキスト入力欄でキーを押すと、コンソールに「押されたキー: (押したキー)」と表示されます。

○addEventListenerの第3引数について

ところで、addEventListenerメソッドには、イベントの種類とイベントリスナー関数に加えて、もう1つオプションの引数があることをご存知でしょうか？

それが、第3引数の「オプション」です。

たとえば、第3引数に「{ once: true }」を指定すると、イベントリスナーは一度だけ実行されます。

また、「{ capture: true }」を指定すると、キャプチャフェーズでイベントを補足できます。

document.getElementById("myButton").addEventListener("click", function() {
  console.log("ボタンがクリックされました！");
}, { once: true });

上記の例では、ボタンが初めてクリックされた時に1度だけ、コンソールに「ボタンがクリックされました！」と出力されます。

2回目以降のクリックでは、もうイベントリスナーは実行されません。

このように、addEventListenerの第3引数を活用することで、より柔軟にイベント処理を制御できるようになるのです。

状況に応じて使い分けていきましょう。

●イベントリスナーの追加と削除

さて、addEventListenerメソッドを使ってイベントリスナーを追加する方法はわかりましたが、もしイベントリスナーが不要になったらどうしましょう？

そんな時は、removeEventListenerメソッドを使ってイベントリスナーを削除することができます。

イベントリスナーを適切に管理することは、パフォーマンスの最適化や予期せぬバグの防止につながります。

不要になったイベントリスナーをそのままにしておくと、メモリリークなどの問題を引き起こす可能性があるのです。

○サンプルコード3：イベントリスナーの削除

では、実際にイベントリスナーを削除するサンプルコードを見てみましょう。

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

function handleClick() {
  console.log("ボタンがクリックされました！");
  button.removeEventListener("click", handleClick);
}

button.addEventListener("click", handleClick);

このコードでは、ボタンがクリックされると、コンソールに「ボタンがクリックされました！」と出力され、同時にイベントリスナーが削除されます。

つまり、このボタンは1回だけクリックイベントに反応し、その後は無効化されるわけです。

○サンプルコード4：一度だけ実行するイベントリスナー

ちょっとややこしいですが、先ほどのサンプルコードは、addEventListenerの第3引数を使っても同じように実装できます。

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

function handleClick() {
  console.log("ボタンがクリックされました！");
}

button.addEventListener("click", handleClick, { once: true });

第3引数の「{ once: true }」を指定することで、このイベントリスナーは1回だけ実行されます。

内部的には、イベントリスナーが自動的に削除されているのと同じ動作になります。

○サンプルコード5：複数のイベントリスナーの追加

1つのHTML要素に対して、複数のイベントリスナーを追加することもできます。

たとえば、ボタンにマウスを乗せた時と外した時に、それぞれ別の処理を実行したいケースなどがあります。

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

function handleMouseEnter() {
  button.style.backgroundColor = "skyblue";
}

function handleMouseLeave() {
  button.style.backgroundColor = "";
}

button.addEventListener("mouseenter", handleMouseEnter);
button.addEventListener("mouseleave", handleMouseLeave);

このコードでは、ボタンにマウスが乗った時（mouseenterイベント）に背景色を空色に変更し、マウスが外れた時（mouseleaveイベント）に背景色を元に戻しています。

このように、1つのHTML要素に複数のイベントリスナーを追加して、よりインタラクティブな動作を実現できます。

●よくあるエラーと対処法

addEventListenerを使ってイベント処理を実装していると、時々思わぬエラーに遭遇することがあります。

初心者の頃は特に、エラーメッセージを見ても何が原因なのかわからず、頭を抱えてしまった経験はないでしょうか。

ただ、よくあるエラーのパターンを知っておけば、すぐに原因を特定して対処することができます。

ここでは、addEventListenerを使う上でよく遭遇するエラーとその対処法を見ていきましょう。

○「addEventListener is not a function」エラー

まずは、「addEventListener is not a function」というエラーについて解説します。

このエラーは、addEventListener メソッドが存在しないオブジェクトに対して呼び出された時に発生します。

const myObject = {
  name: "John",
  age: 30
};

myObject.addEventListener("click", function() {
  console.log("クリックされました！");
});

実行結果

Uncaught TypeError: myObject.addEventListener is not a function

このコードでは、myObjectはカスタムオブジェクトであり、addEventListenerメソッドを持っていません。

そのため、エラーが発生してしまいます。

この問題を解決するには、addEventListener メソッドを持つオブジェクト（通常はHTML要素）に対してイベントリスナーを追加する必要があります。

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

myButton.addEventListener("click", function() {
  console.log("クリックされました！");
});

これで、ボタンをクリックすると、コンソールに「クリックされました！」と表示されるようになりました。

○イベントリスナーが発火しない場合

イベントリスナーを正しく追加したはずなのに、期待した動作が起こらないことがあります。

こんな時は、次のような原因が考えられます。

原因1：イベントリスナーを追加するタイミングが遅すぎる

<button id="myButton">クリックしてください</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
  console.log("クリックされました！");
});
</script>

原因2：イベントリスナーを追加する要素が存在しない

document.getElementById("myNonExistentButton").addEventListener("click", function() {
  console.log("クリックされました！");
});

原因1の場合は、スクリプトをHTMLの最後に移動するか、DOMContentLoadedイベントを使って要素の読み込みを待つ必要があります。

<button id="myButton">クリックしてください</button>

<script>
document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("myButton").addEventListener("click", function() {
    console.log("クリックされました！");
  });
});
</script>

原因2の場合は、要素の id が正しいかどうかを確認し、必要であれば HTML を修正します。

○イベント伝播の制御方法

最後に、イベント伝播の制御方法について触れておきましょう。

イベント伝播とは、イベントが発生した要素から、その親要素へと順番にイベントが伝わっていく仕組みのことです。

<div id="outerDiv">
  <button id="innerButton">クリックしてください</button>
</div>

const outerDiv = document.getElementById("outerDiv");
const innerButton = document.getElementById("innerButton");

outerDiv.addEventListener("click", function() {
  console.log("外側のdivがクリックされました！");
});

innerButton.addEventListener("click", function() {
  console.log("内側のボタンがクリックされました！");
});

実行結果として、ボタンをクリックすると、次の順番でログが出力されます。

「内側のボタンがクリックされました！」
「外側のdivがクリックされました！」

この動作を止めたい場合は、イベントオブジェクトの stopPropagation メソッドを使います。

innerButton.addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("内側のボタンがクリックされました！");
});

実行結果として、ボタンをクリックすると、「内側のボタンがクリックされました！」だけがログに出力され、イベントの伝播が止ります。

addEventListenerを使う上でのよくあるエラーと対処法を理解することで、より快適にJavaScriptでのイベント処理を実装できるようになります。

エラーに遭遇しても慌てず、冷静に原因を特定し、適切な対処を行いましょう。

●addEventListenerの応用例

これまでaddEventListenerの基本的な使い方やよくあるエラーについて学んできましたが、実際の開発現場では、もっと高度なイベント処理のテクニックが求められることがあります。

ここでは、そんなaddEventListenerの応用例をいくつか見ていきましょう。

これらの応用例を理解することで、よりインタラクティブで使いやすいWebサイトやアプリケーションを作成できるようになります。

では早速、サンプルコードを交えながら解説していきましょう。

○サンプルコード6：デリゲーションパターンの実装

デリゲーションパターンとは、親要素にイベントリスナーを設定し、子要素で発生したイベントを親要素で処理する方法です。

これにより、動的に追加された子要素に対してもイベント処理を適用できます。

<ul id="myList">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

const myList = document.getElementById("myList");

myList.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("クリックされた項目: " + event.target.textContent);
  }
});

// 動的に項目を追加
const newItem = document.createElement("li");
newItem.textContent = "項目4";
myList.appendChild(newItem);

リストの項目をクリックすると、コンソールに「クリックされた項目: (クリックした項目のテキスト)」と表示されます。

動的に追加された項目4をクリックしても、同様に動します。

この例では、ul要素にイベントリスナーを設定し、クリックイベントが発生した要素がli要素であるかどうかを判定しています。

これにより、動的に追加されたli要素に対しても、同じイベント処理が適用されます。

○サンプルコード7：カスタムイベントの作成と発火

JavaScriptでは、独自のカスタムイベントを作成して発火させることができます。

これにより、コンポーネント間の通信やモジュール間の疎結合を実現できます。

// カスタムイベントを作成
const myEvent = new Event("myCustomEvent");

// イベントリスナーを設定
document.addEventListener("myCustomEvent", function() {
  console.log("カスタムイベントが発火しました！");
});

// カスタムイベントを発火
document.dispatchEvent(myEvent);

このコードを実行すると、コンソールに「カスタムイベントが発火しました！」と表示される。

この例では、”myCustomEvent”という名前のカスタムイベントを作成し、document要素に対してイベントリスナーを設定しています。

その後、dispatchEventメソッドを使ってカスタムイベントを発火させています。

カスタムイベントを活用することで、コンポーネント間のコミュニケーションを疎結合に保ちつつ、柔軟にイベント処理を行うことができます。