JavaScript イベント処理クイズ - プレイ中

1 第1問

現代のJavaScriptで要素にイベントハンドラをアタッチするための主要なメソッドは何ですか？

A attachEvent()

B addEventListener()

C onEvent()

D setEventHandler()

2 第2問

Eventオブジェクトのどのメソッドが、イベントに対するブラウザのデフォルトアクションを阻止しますか？

A stopEvent()

B cancelDefault()

C preventDefault()

D haltAction()

3 第3問

addEventListenerでイベントハンドラをアタッチした場合（第3引数なし、またはfalseの場合）、デフォルトではどのイベントフェーズで実行されますか？

A キャプチャリングフェーズ

B ターゲットフェーズ

C バブリングフェーズ

D 初期化フェーズ

4 第4問

addEventListenerで通常の関数宣言をハンドラとして使用する場合、ハンドラ内のthisは何を指しますか？

A windowオブジェクト

B documentオブジェクト

C イベントが発生した要素（event.target）

D イベントリスナーがアタッチされた要素（event.currentTarget）

5 第5問

イベント委譲（Event Delegation）の主な利点は何ですか？

A イベントハンドラの実行速度を低下させる

B DOM要素の数を増やす

C 多数の子要素にイベントハンドラを効率的に管理できる

D イベントのバブリングを完全に停止させる

6 第6問

スタイルシート、画像、サブフレームの読み込みを待たずに、初期のHTMLドキュメントが完全に読み込まれ、解析されたときに発生するイベントは何ですか？

A load

B ready

C DOMContentLoaded

D documentReady

7 第7問

イベントハンドラ内で、event.targetは何を指しますか？

A イベントリスナーがアタッチされた要素

B イベントが最初に発生した要素

C windowオブジェクト

D documentオブジェクト

8 第8問

JavaScriptのイベント処理において、`event.preventDefault()`メソッドの主な役割は何ですか？

A イベントがDOMツリーをバブリングするのを阻止する。

B イベントに関連付けられたブラウザのデフォルトアクション（例：リンクの遷移、フォームの送信）を停止する。

C 現在の要素に対するそれ以上のイベントリスナーの実行を停止する。

D イベントが一度トリガーされた後に、イベントリスナーを削除する。

9 第9問

イベント委譲（Event Delegation）の主な利点として、最も適切なものはどれですか？

A イベントリスナーが登録された要素でしかイベントが発生しなくなるため、予期せぬ動作を防ぐ。

B 多数の子要素に個別にイベントリスナーを登録するよりも、メモリ使用量を削減し、パフォーマンスを向上させる。

C すべてのイベントに対して自動的に`event.preventDefault()`が適用され、デフォルト動作をキャンセルする手間が省ける。

D イベントのキャプチャリングフェーズでのみイベントを処理できるため、バブリングフェーズでの競合を避けられる。

10 第10問

JavaScriptで、ある要素の同じイベントタイプ（例: 'click'）に対して複数の異なるイベントハンドラを登録する最も推奨される方法はどれですか？

A `element.onclick = handler1; element.onclick = handler2;`

B `element.addEventListener('click', handler1); element.addEventListener('click', handler2);`

C `element.attachEvent('onclick', handler1); element.attachEvent('onclick', handler2);`

D `element.dispatchEvent(new Event('click'));`