DOMイベントのリスナーを登録・解除する
// ── 基本: クリックイベントを登録する ────────────────────
const btn = document.querySelector('#my-btn') as HTMLButtonElement;
btn?.addEventListener('click', (event: MouseEvent) => {
console.log('クリックされました');
console.log('クリック位置:', event.clientX, event.clientY);
event.stopPropagation(); // 親要素へのイベント伝播を止める
});
// ── よく使うイベント種別 ──────────────────────────────
// 'click' → クリック
// 'input' → 値が変わるたびに発火（リアルタイム検索など）
// 'change' → 値が確定したとき（ドロップダウンなど）
// 'submit' → フォーム送信（必ず e.preventDefault() を呼ぶ）
// 'keydown' → キーが押されたとき
// 'scroll' → スクロールしたとき
// 'resize' → ウィンドウサイズが変わったとき
// ── イベントリスナーの削除（メモリリーク対策）────────
// removeEventListener には「同じ関数の参照」が必要
const handleClick = (e: Event) => console.log('click', e.target);
btn?.addEventListener('click', handleClick);
// ... 後で削除
btn?.removeEventListener('click', handleClick);
// ── フォームの submit イベント ────────────────────────
const form = document.querySelector('form');
form?.addEventListener('submit', (e: SubmitEvent) => {
e.preventDefault(); // ← これを忘れるとページがリロードされる！
const data = new FormData(form);
console.log('name:', data.get('name'));
});removeEventListenerには同じ関数参照が必要なため、アロー関数を直接渡すと解除できない。once: trueオプションで自動的に1回で解除できる。