基本的な知識がないので

とにかくいろんな所で引っ掛かります。

例えば、ゲーム中にキーボードのAを押すとテキスト入力ボックスを表示させたい時に、

    const input = document.createElement('input');

    document.addEventListener('keydown', (e) => {

      if (e.key == "a") {

        document.body.append(input);

        input.focus();

      }

    });

こんなjavascriptを書いたとしよう。（このままではアレだがあくまで例として）

すると、テキスト入力ボックスの初期値（のように見えるモノ）が、空白""ではなく、"a"になってしまう。

ちょっと考えれば、input.focus()が原因であることはわかるが、どうも直感的ではないような。

キーボードのAは、keydownイベントを発火させるために押されているのに、そのあと有効になったはずのテキスト入力ボックスにまでAが入力されてしまうのは、すごくモヤモヤする。

（詳しい説明はしないし出来ないが、イベント発生の順番がkeydown=>input=>keyupなので、keydown中はinput.value==""なのだが、keyup中はinput.value=="a"になっている）

で、なんでinput.focus()が必要だったかと言えば、フォーカスがないといちいち入力ボックスを選択しないといけないからで、なおかつiframe内だとautofocusが効かないという、そっちはそっちでモヤモヤする話なんだよなぁ…。

というように、何かあるたびに時間を浪費しまくった今回のGW期間だった訳だが、有意義だったのかどうか。