title: Dispatching event manually do not change event target value
body: <p>Based on provided code, when the select option is changed, everything works fine and <code>event.target.value</code> contains an option value. But when the <code>change</code> event is triggered manually, for example on the form <code>reset</code> event, the value inside <code>event.target</code> object is changed, but <code>event.target.value</code> keeps an old value. For example:</p>
  <pre><code>&lt;form method=&quot;POST&quot; action=&quot;&quot;&gt;
      &lt;select name=&quot;number&quot;&gt;
          &lt;option value=&quot;0&quot;&gt;Select&lt;/option&gt;
          &lt;option value=&quot;1&quot;&gt;One&lt;/option&gt;
          &lt;option value=&quot;2&quot;&gt;Two&lt;/option&gt;
          &lt;option value=&quot;3&quot;&gt;Three&lt;/option&gt;
      &lt;/select&gt;
      &lt;button type=&quot;reset&quot;&gt;Reset&lt;/button&gt;
      &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>JavaScript:</p>
  <pre><code>    const element = document.querySelector('select')
  
      element.addEventListener('change', function (event) {
          console.log(event)
          console.log('Make Axios request with parameter: ' + event.target.value)
      })
  
      element.form.addEventListener('reset', function (event) {
          console.log('Form reset!')
          element.dispatchEvent(new Event('change'))
      })
  </code></pre>
  <p>When the select option is changed to 1, output will be:</p>
  <ol>
  <li>Event (where <code>target.value</code> is set to 1)</li>
  <li>Make Axios request with parameter: 1</li>
  </ol>
  <p>When the &quot;Reset&quot; button is clicked, output will be:</p>
  <ol>
  <li>Form reset!</li>
  <li>Event (where <code>target.value</code> is set to 0)</li>
  <li>Make Axios request with paramter: 1</li>
  </ol>
  <p>Does anyone knows why Event object is changed as it &quot;should&quot;, but <code>event.target.value</code> is not changed and how to make this work?</p>
  <p>I do not know if this is even possible to do this way. Maybe the <code>change</code> event is fired before the form is actually filled with <code>defaultValues</code>, so <code>event.target.value</code> keeps an old value, but it has no sense to me since Event object has correct value.</p>
  <p><strong>UPDATE</strong>: It works when dispatching is timed out.</p>
  <pre><code>form.addEventListener('reset', function (event) {
      console.log('Form reset!')
      setTimeout(() =&gt; {
          element.dispatchEvent(new Event('change'))
      }, 1)
  })
  </code></pre>
  <p>It seems like the event is dispatched before the reset event actually reset values to default, but I have no idea why <code>console.log(event)</code> shows Event with updated <code>event.target.value</code> when the &quot;Reset&quot; button is clicked.</p>