【JavaScript】addEventListenerの使い方を解説！

JavaScriptでユーザーの操作に反応させたいときに欠かせないのが addEventListener() です。クリック、スクロール、キーボード入力など、さまざまなイベントに対応でき、モダンなWeb開発では必須の機能です。

この記事では addEventListener() の基本から応用までをわかりやすく解説します。

addEventListenerとは？

addEventListener() は、HTML要素に対してイベントリスナー（イベントが発生したときに実行する関数）を登録するためのメソッドです。

基本構文：

element.addEventListener(type, listener, options);

基本的な使い方

例：クリックイベントを登録

<button id="myButton">クリックしてね</button>
<script>
  const btn = document.getElementById("myButton");

  btn.addEventListener("click", function () {
    alert("ボタンがクリックされました！");
  });
</script>

このように、ボタンがクリックされたときにアラートが表示されるイベントを登録できます。

無名関数・名前付き関数

イベントリスナーには無名関数・名前付き関数のどちらも使えます。

無名関数（上の例）

btn.addEventListener("click", function () {
  alert("クリックされた！");
});

名前付き関数

function showMessage() {
  alert("こんにちは！");
}
btn.addEventListener("click", showMessage);

名前付き関数は後から removeEventListener() で解除したい場合に便利です。

複数のイベントを登録できる

同じ要素に対して複数のイベントを登録することも可能です。

btn.addEventListener("mouseenter", () => {
  btn.style.backgroundColor = "lightblue";
});

btn.addEventListener("mouseleave", () => {
  btn.style.backgroundColor = "";
});

マウスが要素に入ったときと出たときに別々の処理をさせることができます。

一度だけ実行したい場合（once）

イベントを一度だけ実行したい場合は、オプションに { once: true } を指定します。

btn.addEventListener("click", () => {
  alert("このメッセージは一度だけ表示されます");
}, { once: true });

イベントの伝播制御（stopPropagation）

イベントが親要素へ伝播するのを防ぎたい場合、リスナー関数内で event.stopPropagation() を呼び出します。

btn.addEventListener("click", (event) => {
  event.stopPropagation();
  alert("このクリックは親要素には届きません");
});

removeEventListenerで解除

登録したイベントを解除するには removeEventListener() を使います。ただし、同じ関数オブジェクトを使う必要があります。

function greet() {
  alert("Hello!");
}

btn.addEventListener("click", greet);
// 解除
btn.removeEventListener("click", greet);

※ 無名関数では解除できません。

よく使うイベントタイプ一覧

addEventListenerの注意点

無名関数は remove できない

removeEventListener() でイベントを解除するには、登録時と同じ関数オブジェクトを指定する必要があります。以下のように無名関数で登録すると、後から解除できません。

btn.addEventListener("click", function () {
  console.log("クリック！");
});

// この解除は無効（関数が別物）
btn.removeEventListener("click", function () {
  console.log("クリック！");
});

対策： 関数は変数や関数名で定義して使い回すようにしましょう。

同じイベント・関数は複数回登録されない

同じ要素に同じイベントと同じ関数を何度登録しても、最初の1回しか登録されません。

function handleClick() {
  console.log("クリック！");
}
btn.addEventListener("click", handleClick);
btn.addEventListener("click", handleClick); // 無視される

メモリリークの原因になることも

イベントリスナーを大量に登録し、解除しないまま DOM 要素を削除すると、ガーベジコレクションが行われずメモリリークの原因になることがあります。特に SPA や動的に生成・破棄される要素に注意が必要です。

対策：

• 要素削除時に removeEventListener() を呼ぶ
• オプションで { once: true } を活用する

このような注意点を理解して使えば、addEventListener() をより安全・効率的に活用できます。

まとめ

• addEventListener() はイベント駆動の中心的存在。
• 複数のイベント登録や解除、オプション指定などが可能。
• よくあるエラーとして、関数の使い回しができていないと removeEventListener() が効かないことに注意。

JavaScriptでユーザーとインタラクションを作る上で、addEventListener() の理解は非常に重要です。ぜひ手を動かしながら試してみてください！

参考リンク

• MDN: Element.addEventListener()
• MDN: イベントリスナーの削除