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

1 第1問

`addEventListener` メソッドの正しい構文はどれですか？

A `element.on('click', handler)`

B `element.addEventListener('click', handler)`

C `element.attachEvent('onclick', handler)`

D `element.addEvent('click', handler)`

2 第2問

イベントハンドラ内で、イベントを発生させた要素自身を参照するために使用する `Event` オブジェクトのプロパティはどれですか？

A `event.currentTarget`

B `event.target`

C `event.srcElement`

D `event.originalTarget`

3 第3問

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

A `event.stopImmediatePropagation()`

B `event.cancelDefault()`

C `event.preventDefault()`

D `event.stopEvent()`

4 第4問

`addEventListener` メソッドの第三引数で `true` を指定した場合、イベントはどのフェーズで処理されますか？

A バブリングフェーズ

B ターゲットフェーズ

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

D イベントは処理されない

5 第5問

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

A `element.deleteEventListener('click', handler)`

B `element.removeEventListener('click', handler)`

C `element.detachEvent('onclick', handler)`

D `element.clearEventListener('click', handler)`

6 第6問

`function` キーワードで定義された通常の関数をイベントリスナーとして使用した場合、その関数内の `this` キーワードは何を参照しますか？

A `window` オブジェクト

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

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

D `document` オブジェクト

7 第7問

多数の子要素に同じイベントリスナーを設定する代わりに、親要素に1つのイベントリスナーを設定し、イベントの発生元を特定して処理する手法は何と呼ばれますか？

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

B イベントバブリング

C イベントデリゲーション

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

8 第8問

イベントがDOMツリーを伝播するのを停止し、親要素や子要素のイベントリスナーが呼び出されないようにするメソッドはどれですか？

A `event.stopDefault()`

B `event.stopPropagation()`

C `event.cancelBubble()`

D `event.haltPropagation()`

9 第9問

スクロールイベントなどのパフォーマンスを向上させるために、イベントハンドラ内で `preventDefault()` を呼び出さないことをブラウザに伝えるオプションはどれですか？

A `{ once: true }`

B `{ capture: true }`

C `{ passive: true }`

D `{ signal: abortController.signal }`

10 第10問

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

A イベントハンドラの実行速度を常に向上させる

B DOM要素にアタッチされるイベントリスナーの総数を削減する

C すべてのイベントをキャプチャフェーズでのみ処理する

D イベントのデフォルト動作を自動的に防止する

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