メインコンテンツまでスキップ

イベント処理

ユーザーのアクションや特定の状況に応じてコードを実行するための仕組みです。

イベントリスナーの追加​

const button = document.querySelector("button");

// アロー関数を使用したイベントリスナー
button.addEventListener("click", () => {
  console.log("ボタンがクリックされました！");
});

// 名前付き関数を使用したイベントリスナー
function handleClick(event) {
  // イベントオブジェクトから情報を取得できる
  console.log("クリック位置:", event.clientX, event.clientY);
}

button.addEventListener("click", handleClick);

// イベントリスナーの削除 (登録時と同じ関数を渡す)
button.removeEventListener("click", handleClick);

リスナーのオプション​

addEventListener の第 3 引数にオプションを渡せます。

// once: 一度だけ実行して自動的に解除される
button.addEventListener("click", () => {
  console.log("最初のクリックだけ反応");
}, { once: true });

// passive: preventDefault() を呼ばないことを宣言し、スクロール性能を上げる
// （touchstart / touchmove / wheel で有効。scroll 自体はキャンセル不可のため不要）
element.addEventListener("touchmove", handleTouchMove, { passive: true });

一般的なイベントタイプ​

// マウスイベント
element.addEventListener("click", handler);     // クリック時
element.addEventListener("dblclick", handler);  // ダブルクリック時
element.addEventListener("mouseover", handler); // 要素上にマウスが入った時
element.addEventListener("mouseout", handler);  // 要素からマウスが出た時

// キーボードイベント
document.addEventListener("keydown", handler);  // キーを押した時
document.addEventListener("keyup", handler);    // キーを離した時
// keypress は非推奨。文字入力の検知も keydown または input を使う

// フォームイベント
form.addEventListener("submit", handler);  // フォーム送信時
input.addEventListener("input", handler);  // 入力中
input.addEventListener("change", handler); // 入力値が変更された時

// ドキュメント・ウィンドウイベント
window.addEventListener("load", handler);                // ページ読み込み完了時
document.addEventListener("DOMContentLoaded", handler);  // DOM 構築完了時
window.addEventListener("resize", handler);              // ウィンドウサイズ変更時

イベント伝播とバブリング​

要素のイベントは、次の 3 つのフェーズを順番に通過します。

通常 addEventListener はバブリングフェーズ（③）でイベントを捕まえます。

// バブリングの停止
element.addEventListener("click", (event) => {
  event.stopPropagation();
  console.log("イベントはここで停止します");
});

// デフォルト動作の防止 (フォーム送信のページ遷移を止めるなど)
form.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log("フォームは送信されません");
});
キャプチャフェーズで捕まえる

addEventListener の第 3 引数に { capture: true } を渡すと、バブリング（下から上）ではなく キャプチャフェーズ（上から下） でイベントを捕まえられます。通常はバブリングで十分ですが、親要素で先に処理したい場合に使います。

イベント委任（Event Delegation）​

親要素に 1 つだけリスナーを設定し、多数の子要素のイベントをまとめて処理する技術です。バブリングを利用しています。

const list = document.querySelector("ul");

list.addEventListener("click", (event) => {
  // closest を使うと、li の中の子要素をクリックしても正しく li を取得できる
  const item = event.target.closest("li");
  if (item) {
    console.log("クリックされたリスト項目:", item.textContent);
  }
});
初級者向け解説

100 個のリスト項目に個別にリスナーを設定するより、リスト全体に 1 つ設定する方が効率的です。event.target.closest("li") を使うと、リスト項目の中にアイコンやテキストがあっても、確実に親の li を取得できます。

次に読む​

  • 非同期処理 — クリックや通信など「待つ処理」をきれいに書く