Why doesn't manual "reset" event bubble to a form element?

Question

Why does the following not trigger the alert when clicking the button?

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 type="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 type="button">Reset</button>
  </span>
</div>

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

Answer 1

My guess would be that the build-in event called reset is "reserved" for the form element. And introducing the form element to the DOM tree will somehow break the event.

Now, we don't know the end goal, but why not dispatch the event on the form element:

document.addEventListener('reset', function(event) {
  alert('Reset clicked!');
});

document.forms.form01.reset.addEventListener('click', e => {
  e.target.form.dispatchEvent(new Event('reset', {
    bubbles: true
  }));
});

<form name="form01">
  <button name="reset" type="button">Reset</button>
</form>

Or just use the reset build-in reset event as it is:

document.addEventListener('reset', function(event) {
  alert('Reset clicked!');
});

<form name="form01">
  <button type="reset">Reset</button>
</form>

Or create a custom event:

document.addEventListener('fancyreset', function(event) {
  alert('Reset clicked!');
});

document.forms.form01.reset.addEventListener('click', e => {
  document.querySelector('span').dispatchEvent(new CustomEvent('fancyreset', {
    bubbles: true
  }));
});

<form name="form01">
  <span>
    <button name="reset" type="button">Reset</button>
  </span>
</form>