Why doesn’t manual “reset” event bubble to a form tag?

Why does the following not trigger the alert?

document.addEventListener('reset', function(event) {
  alert('Reset clicked!');
});
  
document.querySelector('button').addEventListener('click', () => {
  document.querySelector('span').dispatchEvent(new Event('reset', { bubbles: true }));
});

<form>
  <span>
    <button>Reset</button>
  </span>
</form>

However, if I change the form tag to a div, it works as expected:

document.addEventListener('reset', function(event) {
  alert('Reset clicked!');
});
  
document.querySelector('button').addEventListener('click', () => {
  document.querySelector('span').dispatchEvent(new Event('reset', { bubbles: true }));
});

<div>
  <span>
    <button>Reset</button>
  </span>
</div>

I’ve also tried changing the event name to something other than “reset” and again it works as expected.