JavaScript イベント処理クイズ腕試し

1 第1問

フォームの送信やリンクのクリックなど、ブラウザのデフォルトの動作をキャンセルするために使用する`Event`オブジェクトのメソッドは何ですか？

A event.stopPropagation()

B event.stopImmediatePropagation()

C event.preventDefault()

D event.cancelBubble = true;

2 第2問

イベント伝播の3つのフェーズのうち、イベントがドキュメントのルートからターゲット要素に向かって「下っていく」フェーズは何と呼ばれますか？

A バブリングフェーズ (Bubbling Phase)

B ターゲットフェーズ (Target Phase)

C キャプチャリングフェーズ (Capturing Phase)

D ディスパッチフェーズ (Dispatch Phase)

3 第3問

`addEventListener`を使用してイベントハンドラを登録した場合、そのハンドラ関数内で`this`キーワードは何を参照しますか？（アロー関数を使用しない場合）

A `window`オブジェクト

B イベントが発生した要素 (`event.target`)

C イベントリスナーがアタッチされた要素 (`event.currentTarget`)

D `document`オブジェクト

4 第4問

`removeEventListener`を使用してイベントリスナーを正常に削除するために、`addEventListener`で登録した時と完全に一致させる必要があるものは何ですか？

A イベントタイプとハンドラ関数

B イベントタイプとキャプチャリングフェーズの指定

C イベントタイプ、ハンドラ関数、およびキャプチャリングフェーズの指定

D イベントタイプのみ

5 第5問

`element.addEventListener('click', handlerFunction)`を使用する主な利点は、`element.onclick = handlerFunction`と比べて何ですか？

A より古いブラウザで広くサポートされている。

B イベントハンドラ内で`this`の参照が自動的に`window`になる。

C 同じ要素の同じイベントタイプに対して複数のイベントハンドラを登録できる。

D イベントの伝播を自動的に停止する。

6 第6問

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

A イベントのバブリングフェーズを完全に無効にする。

B 多数の子要素に個別のイベントリスナーを設定する代わりに、親要素に1つのリスナーを設定することでメモリ使用量を削減し、パフォーマンスを向上させる。

C `event.preventDefault()`を自動的に呼び出す。

D 動的に追加された要素にはイベントリスナーが不要になる。

7 第7問

HTMLドキュメントが完全に読み込まれ、パースされた直後に発生するイベントで、画像やスタイルシートなどの外部リソースの読み込み完了を待たないイベントは何ですか？

A `load`

B `DOMContentLoaded`

C `ready`

D `beforeunload`

8 第8問

イベントリスナーが親要素にアタッチされている場合、イベントハンドラ内で`event.target`プロパティは何を参照しますか？

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

B イベントが最初に発生した（クリックされた）要素。

C `window`オブジェクト。

D `document`オブジェクト。

9 第9問

JavaScriptのイベント伝播において、イベントがDOMツリーを遡る（バブリング）のを途中で停止させたいが、現在の要素に登録されている他のイベントリスナーは実行させたい場合、どのメソッドを使用しますか？

A event.stopImmediatePropagation()

B event.stopPropagation()

C event.preventDefault()

D return false

10 第10問

JavaScriptのイベント処理における「イベント委譲（Event Delegation）」の主な利点は何ですか？

A イベントのデフォルトアクションを自動的にキャンセルする。

B 多数の要素に個別にイベントリスナーを登録する代わりに、親要素で一括して処理することで、パフォーマンスとメモリ使用量を改善する。

C イベントリスナーが常にキャプチャリングフェーズで実行されることを保証する。

D イベント発生時に`this`キーワードが常にイベントターゲット要素を参照するようになる。

JavaScript イベント処理クイズ 腕試し