【JavaScript】クリックイベントの設定方法｜addEventListener・event オブジェクト・バブリング・イベント委任・実務パターンまで解説

<button id="myBtn">クリック</button>

const btn = document.getElementById("myBtn");

btn.addEventListener("click", () => {
  console.log("クリックされました");
});

const btn = document.getElementById("myBtn");

// 2つのリスナーを同じ要素に登録できる
btn.addEventListener("click", () => console.log("処理A"));
btn.addEventListener("click", () => console.log("処理B"));
// クリック時: "処理A" → "処理B"（両方実行される）

const btn = document.getElementById("myBtn");

btn.onclick = () => console.log("処理A");
btn.onclick = () => console.log("処理B"); // 処理Aが消える
// クリック時: "処理B" のみ

<div id="parent">
  <button id="child">クリック</button>
</div>

document.getElementById("parent").addEventListener("click", (e) => {
  console.log("target:", e.target.id);        // "child"（実際にクリックされた要素）
  console.log("currentTarget:", e.currentTarget.id); // "parent"（リスナーが付いた要素）
});

// リンクのクリックでページ遷移を防ぐ
document.querySelector("a.no-navigate").addEventListener("click", (e) => {
  e.preventDefault();
  console.log("遷移しません");
});

// フォームの送信を防いで独自処理
document.getElementById("myForm").addEventListener("submit", (e) => {
  e.preventDefault();
  // 非同期送信などの独自処理
});

<div id="outer">
  <div id="inner">
    <button id="btn">クリック</button>
  </div>
</div>

document.getElementById("btn").addEventListener("click", () => console.log("btn"));
document.getElementById("inner").addEventListener("click", () => console.log("inner"));
document.getElementById("outer").addEventListener("click", () => console.log("outer"));

// ボタンをクリックすると:
// "btn" → "inner" → "outer"（子→親の順に伝播）

document.getElementById("btn").addEventListener("click", (e) => {
  e.stopPropagation(); // 親要素への伝播を停止
  console.log("btn のみ実行");
});

// ボタンをクリック → "btn のみ実行"（inner, outer は実行されない）

const list = document.getElementById("todoList");

// 親要素に1つだけリスナーを設定
list.addEventListener("click", (e) => {
  // クリックされた要素が削除ボタンか判定
  if (e.target.matches(".delete-btn")) {
    e.target.closest("li").remove();
  }
});

// 後から追加した li 内の .delete-btn もイベントが動作する
function addItem(text) {
  list.insertAdjacentHTML(
    "beforeend",
    `<li>${text} <button class="delete-btn">削除</button></li>`
  );
}

// 1回だけ実行されるリスナー
document.getElementById("welcomeBtn").addEventListener("click", () => {
  console.log("ようこそ！（この処理は1回だけ）");
}, { once: true });

// ダブルクリックで編集モードに切り替え
document.getElementById("text").addEventListener("dblclick", (e) => {
  e.target.contentEditable = true;
  e.target.focus();
});

// 右クリックメニューをカスタマイズ
document.getElementById("canvas").addEventListener("contextmenu", (e) => {
  e.preventDefault(); // デフォルトの右クリックメニューを抑止
  showCustomMenu(e.clientX, e.clientY);
});

function handleClick() {
  console.log("クリック！");
}

const btn = document.getElementById("myBtn");

// 登録
btn.addEventListener("click", handleClick);

// 削除（同じ関数参照を渡す必要がある）
btn.removeEventListener("click", handleClick);

document.getElementById("toggleBtn").addEventListener("click", () => {
  document.getElementById("menu").classList.toggle("is-open");
});

const modal = document.getElementById("modal");
const overlay = document.getElementById("overlay");

// 開く
document.getElementById("openBtn").addEventListener("click", () => {
  modal.classList.add("is-open");
  overlay.classList.add("is-open");
});

// 閉じる（オーバーレイクリック）
overlay.addEventListener("click", () => {
  modal.classList.remove("is-open");
  overlay.classList.remove("is-open");
});

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

submitBtn.addEventListener("click", () => {
  // ボタンを無効化
  submitBtn.disabled = true;
  submitBtn.textContent = "送信中...";

  // 送信処理（API呼び出しなど）
  fetch("/api/submit", { method: "POST" })
    .then(res => res.json())
    .then(data => {
      submitBtn.textContent = "送信完了";
    })
    .catch(() => {
      // エラー時はボタンを再有効化
      submitBtn.disabled = false;
      submitBtn.textContent = "再送信";
    });
});