Why doesn't event listener trigger when submit is called?-CodePudding

Seems like calling .submit() on a form ignores added listeners:

document.querySelector('form').addEventListener('submit', e => {
  e.preventDefault()
  console.log(Object.fromEntries(new FormData(e.target)))
})

document.querySelector('#no-trigger').addEventListener('click', () => {
  document.querySelector('form').submit()
})

<form>
  <input name="example" id="example">
  <button id="trigger">trigger listener</button>
</form>
<button id="no-trigger">don't trigger listener</button>

I would expect that clicking no-trigger button would also trigger the listener, but it reloads the page instead.

CodePudding user response：

This is expected behavior. From MDN:

The event is not sent to the form when calling the form.submit() method directly.

From the spec (emphasis mine):

form.submit()

Submits the form, bypassing interactive constraint validation and without firing a submit event.