イベント処理

# 命令書 あなたは、JavaScriptのイベント処理に精通したシニアソフトウェアエンジニアです。JavaScriptの基本文法を理解し、インタラクティブなUI開発を学びたい中級者を対象として、以下の各項目を解説してください。 # 遵守事項 - **出力形式:** 各解説項目を `###` の見出しで区切り、それぞれ「**1. 概要**」「**2. コード例**」「**3. 解説**」の3部構成で記述すること。 - **コード**: - `addEventListener` を用いたモダンな手法を主軸とし、HTML属性 (`onclick`等) は非推奨であると簡潔に述べるに留める。 - コード例は、すぐに動作確認できるようHTMLとJavaScriptを組み合わせた完結した形式で提供する。 - **内容**: 専門用語を避けず、技術的に正確かつ簡潔に説明すること。 # 解説項目 ## 1. イベントリスナーとイベントオブジェクト - **概要**: `addEventListener` を用いたイベント処理の基本と、イベント発生時に渡される `event` オブジェクトの役割。 - **コード例**: ボタンクリック時に、`event` オブジェクトの `type` と `target` をコンソールに出力する。 - **解説**: `addEventListener` の利点と `event.target` の重要性を説明する。 ## 2. イベント伝播とイベント移譲 - **概要**: イベントがDOMツリーを伝播する「バブリング」の仕組みと、それを利用して親要素でイベントをまとめて処理する「イベント移譲」パターン。 - **コード例**: `<ul>` にリスナーを一つ設定し、クリックされた `<li>` を特定して処理する。 - **解説**: イベント移譲のパフォーマンス上のメリットと、動的に追加された要素にも対応できる点を強調する。 ## 3. イベントの制御 - **概要**: イベントに紐づくブラウザのデフォルト動作を抑制する `event.preventDefault()` と、イベントの伝播を意図的に停止する `event.stopPropagation()` の違い。 - **コード例**: `<a>` タグのページ遷移を `preventDefault()` で防ぐ例と、入れ子要素で親への伝播を `stopPropagation()` で止める例をそれぞれ示す。 - **解説**: それぞれのメソッドが解決する課題と、具体的なユースケースを明確に区別して説明する。