JavaScript イベントリスナークイズ

1 第1問

`element.addEventListener(type, listener, options)` メソッドの `type` 引数に指定する値として正しいものはどれですか？

A `onclick`

B `"click"`

C `ClickEvent`

D `on_click`

2 第2問

`addEventListener` で登録したイベントリスナーを削除するために使用するメソッドはどれですか？

A `element.deleteEventListener()`

B `element.removeEventListener()`

C `element.detachEventListener()`

D `element.clearEventListener()`

3 第3問

フォームの送信やリンクのクリックなど、ブラウザのデフォルトの動作をキャンセルするためにイベントハンドラ内で呼び出すべきメソッドはどれですか？

A `event.stopDefault()`

B `event.cancelAction()`

C `event.preventDefault()`

D `event.stopEvent()`

4 第4問

イベントがDOMツリーを伝播する際のフェーズで、ターゲット要素からドキュメントルートに向かってイベントが伝播する現象を何と呼びますか？

A イベントキャプチャリング

B イベントバブリング

C イベントターゲティング

D イベントプロパゲーション

5 第5問

`addEventListener` を使用して登録された通常の関数形式のイベントハンドラ内で、`this` キーワードは何を指しますか？

A `window` オブジェクト

B イベントオブジェクト (`event`)

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

D `document` オブジェクト

6 第6問

HTMLドキュメントのDOMツリーが完全に構築され、パースが完了した時点で発生するイベントはどれですか？画像やスタイルシートなどの外部リソースの読み込みは待機しません。

A `load`

B `ready`

C `DOMContentLoaded`

D `documentReady`

7 第7問

多数の子要素を持つ親要素に対して、個々の子要素にイベントリスナーを登録する代わりに、親要素に1つのイベントリスナーを登録し、イベントの伝播を利用して子要素のイベントを処理する手法を何と呼びますか？

A イベントキャプチャリング

B イベントバブリング

C イベント委譲 (Event Delegation)

D イベントプロパゲーション

8 第8問

`addEventListener` の `options` オブジェクトで `passive: true` を設定すると、どのような効果がありますか？

A イベントハンドラが一度だけ実行されるようになります。

B イベントハンドラ内で `preventDefault()` が呼び出されても無視され、ブラウザのスクロール性能が向上する可能性があります。

C イベントがキャプチャフェーズで処理されるようになります。

D イベントハンドラが非同期で実行されるようになります。

9 第9問

`addEventListener` の `options` オブジェクトで `once: true` を設定すると、どのような効果がありますか？

A イベントが一度だけ発生した後、自動的にリスナーが削除されます。

B イベントがキャプチャフェーズでのみ処理されます。

C イベントハンドラが非同期で実行されます。

D イベントハンドラ内で `preventDefault()` が呼び出されても無視されます。

10 第10問

イベントハンドラ内で `event.stopPropagation()` メソッドを呼び出すと、どのような効果がありますか？

A イベントに関連付けられたブラウザのデフォルトの動作をキャンセルします。

B イベントがDOMツリーの親要素や子要素に伝播するのを停止します。

C イベントハンドラが非同期で実行されるようになります。

D イベントが一度だけ発生した後、自動的にリスナーが削除されます。

JavaScript イベントリスナー クイズ