const btn = document.querySelector('#submit');

// 追加
const handler = (e) => console.log("クリック!");
btn.addEventListener('click', handler);

// 削除
btn.removeEventListener('click', handler);   // 同じ関数参照が必要

input.addEventListener('input', (e) => {
    console.log(e.target.value);   // 現在の入力値
    console.log(e.type);            // 'input'
});

button.addEventListener('click', (e) => {
    console.log(e.target);          // クリックされた要素
    console.log(e.clientX, e.clientY);  // マウス座標
});

document.addEventListener('keydown', (e) => {
    console.log(e.key);             // 'Enter', 'Escape', 'a' など
    if (e.key === 'Enter') submit();
    if (e.ctrlKey && e.key === 's') save();   // ショートカットキー
});

form.addEventListener('submit', (e) => {
    e.preventDefault();   // ページのリロード防止
    // 直接処理
});

link.addEventListener('click', (e) => {
    e.preventDefault();   // リンク移動防止
    showModal();
});

<div id="parent">
    <button id="child">ボタン</button>
</div>

const parent = document.querySelector('#parent');
const child  = document.querySelector('#child');

parent.addEventListener('click', () => console.log("parent"));
child .addEventListener('click', () => console.log("child"));

// 🖱️ ボタン(child) クリック時出力順序:
//   "child"     ← ① クリックされた自分自身が最初
//   "parent"    ← ② 親へ "バブリング" される
//
// 💡 クリックは子から開始 → 親 → 祖先へと "上へ" 伝播する
//    これがバブリング。親も子のクリックを検知する。

child.addEventListener('click', (e) => {
    e.stopPropagation();   // 親への伝播を停止
});

<ul id="list">
    <li>アイテム 1</li>
    <li>アイテム 2</li>
    <li>アイテム 3</li>
    <!-- 1000個もっと -->
</ul>

document.querySelector('#list').addEventListener('click', (e) => {
    if (e.target.tagName === 'LI') {
        console.log(e.target.textContent);
    }
});

// 🐢 debounce — *最後の呼び出しからN ms間無入力になったとき*に実行
function debounce(fn, ms) {
    let timer;                                    // クロージャでtimerを記憶
    return (...args) => {
        clearTimeout(timer);                      // 以前の予約をキャンセル!
        timer = setTimeout(() => fn(...args), ms); // 新しくN ms後に予約
    };
}

// 使用例: 検索入力 — 300 msの間追加入力がないときのみfetch
const search = debounce((q) => {
    fetch(`/api/search?q=${q}`);
}, 300);

const input = document.querySelector('#search');
input.addEventListener('input', e => search(e.target.value));

// 📊 効果:
//   ユーザーが "hello" と5文字入力 → inputイベントが5回発生
//   debounceがない場合 → fetchが5回呼び出される (無駄)
//   debounce 300ms → 最後の入力から300ms後 → fetchが1回