以下のように、focus() の命令を先に実行した場合、
入力欄にフォーカスが当たっているにも関わらず、
p 要素が空文字で表示されてしまいます。

'use strict';

{  
  document.querySelector('input').focus();

  document.querySelector('input').addEventListener('focus', () => {
    document.querySelector('p').textContent = 'English only!';
  });

  document.querySelector('input').addEventListener('blur', () => {
    document.querySelector('p').textContent = '';
  });
}

一度フォーカスを外して、
再度入力欄にフォーカスを当てると、
p 要素に English only! が表示されます（想定通りの挙動）。

上から命令が実行されているとすれば、
最初から English only! が表示されるのが自然だと考えてしまうのですが、
どういった理由でこのようになっているのでしょうか。