JavaScript EventListener

Volardev 編集部 April 18, 2026

1. addEventListener() メソッド

addEventListener() メソッドは、指定されたエレメントにイベントハンドラーをアタッチ（登録）するために使用されます。

1.1 コード例

ユーザーがボタンをクリックしたときに実行されるイベントリスナーを追加します：

document.getElementById("myBtn").addEventListener("click", displayDate);

1.2 addEventListener() の特徴とメリット

既存のイベントハンドラーを上書きすることなく、エレメントにイベントハンドラーをアタッチできます。
1つのエレメントに対して、多くのイベントハンドラーを追加することが可能です。
同じタイプ（例：「click」）のイベントであっても、1つのエレメントに複数追加できます。
HTMLエレメントだけでなく、window オブジェクトなどのあらゆるDOMオブジェクトに対してイベントリスナーを追加できます。
イベントのバブリング（Bubbling）への反応をより簡単にコントロールできます。
JavaScriptコードをHTMLマークアップから分離できるため、可読性が向上し、HTMLコードを直接編集できない環境でもイベントリスナーを追加できるようになります。
removeEventListener() メソッドを使用することで、追加したイベントリスナーを簡単に削除できます。

2. 構文（Syntax）

addEventListener() の基本的な書き方は以下の通りです。

element.addEventListener(event, function, useCapture);

第1パラメーター: イベントのタイプを指定します（例：「click」や「mousedown」など、他の HTML DOM イベント）。
第2パラメーター: イベントが発生したときに呼び出す関数を指定します。
第3パラメーター（オプション）: イベントバブリングまたはイベントキャプチャリングのどちらを使用するかを指定するブール（Boolean）値です。

注意: イベント名には「on」プレフィックスを使用しません。onclick ではなく、 click と記述してください。

3. エレメントへのイベントハンドラー追加

ユーザーがエレメントをクリックした際に「Hello World!」とアラートを表示させる例を見てみましょう。

匿名関数を使用する場合

element.addEventListener("click", function() {
  alert("Hello World!");
});

外部の「名前付き関数」を参照する場合

element.addEventListener("click", myFunction);

function myFunction() {
  alert("Hello World!");
}

4. 同じエレメントへの複数イベント追加

addEventListener() を使用すれば、既存のイベントを壊すことなく、同じ要素に複数のイベントを追加できます。

同一タイプのイベントを複数追加

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

異なるタイプのイベントを追加

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

5. window オブジェクトへのイベントハンドラー追加

addEventListener() は、HTML要素だけでなく、HTMLドキュメント、 window オブジェクト、または xmlHttpRequest のようなイベントをサポートする他のオブジェクトにも追加できます。

ウィンドウのリサイズを検知する例

window.addEventListener("resize", function() {
  document.getElementById("demo").innerHTML = "ウィンドウのサイズが変更されました。";
});

6. パラメーターの受け渡し

関数にパラメーター（引数）を渡したい場合は、指定した関数をパラメーター付きで呼び出すための「匿名関数」を使用します。

コード例

element.addEventListener("click", function() {
  myFunction(p1, p2);
});

7. イベントバブリング、それともキャプチャリング？

HTML DOMには、イベント伝搬（Propagation）の方法として「バブリング」と「キャプチャリング」の2種類があります。

イベント伝搬とは、イベントが発生した際のエレメントの順序を定義する方法です。例えば、 <div> の中に <p> があり、ユーザーが <p> をクリックした場合、どちらのエレメントのクリックイベントを先に処理すべきでしょうか？

バブリング（Bubbling）: 最も内側のエレメントのイベントが最初に処理され、その後外側へと伝わります。つまり、 <p> のイベントが先に処理され、その後に <div> のイベントが処理されます。
キャプチャリング（Capturing）: 最も外側のエレメントのイベントが最初に処理され、その後内側へと伝わります。つまり、 <div> のイベントが先に処理され、その後に <p> のイベントが処理されます。

addEventListener() では、 useCapture パラメーターを使用して伝搬タイプを指定できます。

addEventListener(event, function, useCapture);

デフォルト値は false で、この場合は バブリング が使用されます。 true に設定すると、イベントは キャプチャリング を使用します。

コード例

// キャプチャリング（true）を使用
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

8. removeEventListener() メソッド

removeEventListener() メソッドは、 addEventListener() でアタッチされたイベントハンドラーを削除するために使用されます。

コード例

// マウス移動検知のイベントリスナーを削除
element.removeEventListener("mousemove", myFunction);

メモリリークの防止や、特定の条件下でのみイベントを有効にしたい場合に、このクリーンアップ処理は非常に重要です。