Javascriptのイベント制御

Last updated at 2025-02-25Posted at 2025-02-25

学習トピックの整理

ユーザー操作やページ読み込みなど、処理の実行の起点となる出来事を指します。
イベントが発生すると、ブラウザーがシグナルを発し、対応するコード（イベントハンドラー）が実行される仕組みです。

イベントオブジェクトの生成
- イベントが発生すると、ブラウザーは event オブジェクトを生成。
- event オブジェクトには、発生源（e.target）やキーコードなどの情報 が含まれる。
キャプチャリングフェーズ
- DOMツリーのルート要素 から ターゲット要素（e.target） に向かって イベントが伝播する。
- これを 「キャプチャリングフェーズ」 と呼ぶ。
ターゲットフェーズ
- e.target（イベントが発生した要素）に到達。
- 登録された イベントリスナーのコールバック関数が実行 される。
バブリングフェーズ
- e.target からルート要素に向かって、イベントが逆方向に伝播。
- これを 「バブリングフェーズ」 と呼ぶ。

　伝播経路にある要素
　イベントリスナーの type と event.type が一致
　適切なフェーズで登録されている（capture or bubble）

addEventListener() のデフォルト設定では バブリングフェーズ で実行される。
キャプチャリングフェーズ で実行するには addEventListener(type, callback, true) の true を指定する。
バブリングを活用して、親要素で子要素のイベントを一括管理する手法 を 「イベントの委譲（Event Delegation）」 と呼ぶ。（パフォーマンス向上）

プロパティ	説明
`type`	発生したイベントの種類（例: `click`, `keydown`）
`target`	イベントが発生した最も深い階層の要素（例: `div` 内の `button` をクリック → `e.target === button`）
`currentTarget`	現在のイベントリスナーが登録されている要素（バブリング・キャプチャリングの際に変化する）
`preventDefault()`	デフォルト動作をキャンセル（例: `<a>` の遷移を防ぐ）
`stopPropagation()`	イベントの伝播をストップ（親要素へのバブリングを防ぐ）

ブラウザーは、特定のHTML要素とイベントの組み合わせに対して、あらかじめ決められた動作を実行します。

　　要素の種類（フォーム、リンクなど）
　　イベントの種類（click, submit, contextmenu など）
　　preventDefault() の有無
　　ブラウザーの仕様