title: Event bubbles before captured on `window`
body: <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;div id=&quot;block&quot;&gt;&lt;/div&gt;
  &lt;script&gt;
      window.id = 'window'
      const targets = [window, document.querySelector('#block')]
      for (const target of targets) {
          target.addEventListener('click', function(e) {
              console.log(`\tbubble: ${target.id}, evnetPhase: ${e.eventPhase}`)
          })
          target.addEventListener('click', function(e) {
              console.log(`\tcapture: ${target.id}, evnetPhase: ${e.eventPhase}`)
          }, true)
      }
  
      console.log('dispatch on block:')
      targets[1].dispatchEvent(new Event('click'))
      console.log('==================================================')
      console.log('dispatch on window:')
      window.dispatchEvent(new Event('click'))
      console.log('==================================================')
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Result:</p>
  <pre><code>dispatch on block:
      capture: window, evnetPhase: 1      &lt;- ok
      capture: block, evnetPhase: 2
      bubble: block, evnetPhase: 2
  ==================================================
  dispatch on window:
      bubble: window, evnetPhase: 2       &lt;- bubble before capture?
      capture: window, evnetPhase: 2
  ==================================================
  </code></pre>
  <p>But if you click the webpage with the mouse to dispatch a real <code>click</code> event, the order is right.</p>
  <pre><code>real click:
      capture: window, evnetPhase: 1
      bubble: window, evnetPhase: 3
  </code></pre>
  <p>Other types of events are the same as <code>click</code>, including <code>CustomEvent</code>.</p>
  <p>How can I get the right order with <code>window.dispatchEvent(evt)</code>?</p>