概要
DOMイベントは、**ユーザー操作に応答するアプリケーションの“神経系”**である。
しかし、安易な addEventListener の多用や伝播の誤解は、予測不能なバグやメモリリーク、非効率なUI構造を引き起こす。
本稿では以下を体系化する：
- バブリング・キャプチャの仕組みと使い分け
- イベント委譲による効率化
- 明示的なイベント設計のパターン
- リスナー登録・解除の責務と設計
- カスタムイベントの活用と分離設計
1. イベントの伝播：キャプチャとバブリング
✅ 3段階の流れ
1. キャプチャフェーズ（親 → 子）
2. ターゲットフェーズ（対象要素）
3. バブリングフェーズ（子 → 親）
element.addEventListener('click', handler, true); // キャプチャ
element.addEventListener('click', handler, false); // バブリング（デフォルト）
→ ✅ 明示的に true/false を指定して意図を明文化する
2. バブリング制御と停止
element.addEventListener('click', (e) => {
e.stopPropagation(); // ✅ バブリングを止める
e.preventDefault(); // ✅ デフォルト動作の抑制
});
- ✅
stopPropagation()→ 他のリスナーに伝播させない - ✅
preventDefault()→ リンク遷移、フォーム送信などをキャンセル
3. イベント委譲の設計（イベントバインドの最適化）
❌ 各要素にリスナーを直付け
buttons.forEach(btn => btn.addEventListener('click', onClick));
→ 要素が動的に増減する場合、メンテ不能・非効率
✅ 親要素に1つのリスナー（委譲）
document.querySelector('#list').addEventListener('click', (e) => {
if (e.target.matches('.list-item')) {
handleItemClick(e.target.dataset.id);
}
});
- ✅ 子要素にクラスやdata属性を付けて判別
- ✅ 親に1つだけバインド → 高効率・柔軟
4. removeEventListenerの正しい設計
❌ 無名関数では解除不可
element.addEventListener('click', () => console.log('clicked'));
element.removeEventListener('click', () => console.log('clicked')); // ❌ 効かない
→ ✅ 明示的な関数定義が必要
function onClick(e) { ... }
element.addEventListener('click', onClick);
element.removeEventListener('click', onClick);
5. 一度だけ実行するイベント
element.addEventListener('click', handler, { once: true });
→ ✅ once: true で自動的に1回限りの実行に（手動で解除不要）
6. カスタムイベントとコンポーネント分離
const event = new CustomEvent('user:created', {
detail: { id: 123 }
});
element.dispatchEvent(event);
element.addEventListener('user:created', (e) => {
console.log(e.detail.id); // 123
});
- ✅ UIコンポーネント間の通信に最適
- ✅ “発火”と“受信”を構造的に分離できる
7. イベント命名・スコープ設計指針
| 設計指針 | 解説 |
|---|---|
click, input
|
DOMの基本イベント |
xxx:ready |
状態通知（カスタムイベント） |
user:created |
エンティティ指向のイベント名設計 |
| グローバル禁止 | document/window直付けは極力避ける |
| コンポーネント内 | 独自要素 or Shadow DOM内で閉じるべき |
設計判断フロー
① 要素が動的に増える？ → イベント委譲
② stopPropagation は必要？ → 他のハンドラとの関係を設計
③ 一度しか使わないイベント？ → once: true を使う
④ イベント解除が必要？ → 関数を変数に束縛して管理
⑤ 複数コンポーネント間で通信？ → CustomEvent で疎結合化
よくあるミスと対策
❌ 複数バインド → イベントの多重発火
→ ✅ removeEventListener で常に解除戦略を持つ
❌ stopPropagation の乱用
→ ✅ 原因を切るより“構造を見直す”
❌ 同じリスナーが複数バインド
// ループやクリック内でaddEventListenerし続ける
→ ✅ フラグ管理やonceオプションで設計を
結語
イベントとは「ユーザーの意図に対する、アプリケーション側の反応の設計」である。
- DOM構造と伝播構造は一致しない
- 発火点と処理点は分けて考える
- バブリング・キャプチャは“構造上の意味”を持つ
- 再利用されるイベント構造には、明示と設計が必要
“ただ反応する”ではなく、“意図に応じて設計された反応”を構築すること。
それが、モダンなUIの神経設計である。