addEventListener()の使い方について詳しい説明

1. 概要

addEventListener() は、DOM要素に対してイベントリスナー（イベント発生時に実行する処理）を登録するためのメソッドです。クリック、入力、キーボード操作、マウス操作など様々なイベントに対応でき、複数のリスナーを同じ要素に追加できる点が特徴です。

基本的な構文は以下のとおりです：

javascript
element.addEventListener(event, handler, options);

2. パラメータ

1. event
   文字列で指定します。例: "click", "input", "keydown" など。

2. handler
   イベントが発生したときに実行される関数。通常はコールバック関数を指定します。無名関数や既存の関数参照を渡すことができます。

3. options（省略可能）
   イベントの動作を制御するオプション。以下の指定が可能です：

   • capture: true を指定すると、キャプチャフェーズでイベントを処理します（デフォルトは false）。

   • once: true を指定すると、リスナーは1度だけ実行され、実行後に自動で解除されます。

   • passive: true を指定すると、イベント処理中に preventDefault() を呼べなくなり、スクロールパフォーマンスの最適化に役立ちます。

3. 基本例

html
<button id="myButton">クリックしてください</button>
<script>
  const button = document.getElementById("myButton");

  // クリック時に処理を実行
  button.addEventListener("click", function() {
    alert("ボタンがクリックされました！");
  });
</script>

4. 複数イベントリスナーの追加

同じ要素に複数のリスナーを追加することが可能です。これにより、イベント発生時に複数の処理を独立して実行できます。

javascript
function firstHandler() {
  console.log("最初の処理");
}
function secondHandler() {
  console.log("次の処理");
}

button.addEventListener("click", firstHandler);
button.addEventListener("click", secondHandler);

5. onceオプションの利用例

一度だけ実行したい場合に便利です。

javascript
button.addEventListener("click", () => {
  console.log("この処理は1度だけ実行されます");
}, { once: true });

6. removeEventListener() との組み合わせ

addEventListener() で登録した関数は、removeEventListener() で解除できます。ただし、無名関数は解除できないため、必ず関数参照を使う必要があります。

javascript
function handleClick() {
  console.log("クリックされました");
}

button.addEventListener("click", handleClick);

// 後で解除
button.removeEventListener("click", handleClick);

---

こうした仕組みにより、addEventListener() は柔軟にイベント駆動型プログラミングを実現できる重要なメソッドです。