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

1 第1問

addEventListener メソッドの基本的な構文として正しいものはどれですか？

A element.addEventListener("click", myFunction);

B element.addEventListener(myFunction, "click");

C element.on("click", myFunction);

D element.attachEvent("onclick", myFunction);

2 第2問

JavaScriptのイベント伝播において、デフォルトでイベントハンドラが実行されるフェーズは何ですか？

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

B ターゲティングフェーズ

C バブリングフェーズ

D レンダリングフェーズ

3 第3問

addEventListener で登録したイベントリスナーを正しく削除するために必要な条件は何ですか？

A removeEventListener の第一引数にイベントタイプ、第二引数にイベントハンドラ関数名を指定する。

B removeEventListener の第一引数にイベントタイプ、第二引数に匿名関数を指定する。

C removeEventListener の第一引数にイベントタイプ、第二引数にイベントハンドラ関数への参照を指定する。

D removeEventListener は、addEventListener で登録されたイベントリスナーを自動的に削除するため、明示的に呼び出す必要はない。

4 第4問

イベントオブジェクトの preventDefault() メソッドの主な目的は何ですか？

A イベントの伝播を停止する。

B イベントハンドラの実行を一時停止する。

C イベントに関連するデフォルトの動作をキャンセルする。

D イベントが発生した要素を非表示にする。

5 第5問

イベントオブジェクトの stopPropagation() メソッドの主な目的は何ですか？

A イベントのデフォルト動作をキャンセルする。

B イベントが親要素や子要素に伝播するのを停止する。

C イベントハンドラの実行を遅延させる。

D イベントが発生した要素のスタイルを変更する。

6 第6問

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

A グローバルオブジェクト（window）

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

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

D イベントオブジェクト自体

7 第7問

イベントデリゲーションの主な利点は何ですか？

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

B 多数の要素に個別にイベントリスナーを登録する必要がなくなる。

C event.preventDefault() の効果を無効にする。

D イベントのバブリングフェーズを完全に停止する。

8 第8問

addEventListener の第三引数に { once: true } オプションを指定した場合、どのような動作になりますか？

A イベントハンドラが一度だけ実行された後、自動的に削除される。

B イベントハンドラがキャプチャリングフェーズでのみ実行される。

C イベントのデフォルト動作がキャンセルされる。

D イベントの伝播が停止される。

9 第9問

element.addEventListener('click', handler) と element.onclick = handler の主な違いとして正しいものはどれですか？

A element.onclick は、同じイベントタイプに対して複数のハンドラを登録できる。

B element.addEventListener は、同じイベントタイプに対して複数のハンドラを登録できる。

C element.onclick は、イベントのキャプチャリングフェーズをサポートする。

D element.addEventListener は、古いブラウザとの互換性が高い。

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