javascript - 如何确保 JavaScript .submit() 尊重附加到表单的事件处理程序

Question

注意所以，我实际上在写出问题的同时设法解决了这个问题，但我想无论如何我都会发布它，以防它对其他人有帮助(在 Stack Overflow 上进行简短搜索表明，似乎没有人问过完全相同的问题) )

<小时/>

所以我有一个带有通过 JavaScript 处理的 Web 组件的表单，如下所示:

<form id="myform">
  <input type="text" value="example" tabindex="1" />
  <web-component tabindex="2"></web-component>
  <input type="submit" tabindex="3" />
</form>

<script>
let form = document.getElementById('myform');

form.addEventListener('submit' (e) => {
  e.preventDefault();

  console.log('Form is posting');

  // Handle form stuff here
})
</script>

使用我的 Web 组件，我希望能够在切换到 Web 组件并按“Enter”键时“提交”表单，以便在 Web 组件中具有以下处理程序:

class WebComponent extends HTMLElement {
  constructor() {
    ...

    let form = this.closest('form');

    this.addEventListener('keydown', (e) => {
      if(form && e.code === 'Enter') form.submit();
    })
  }
}

我遇到的问题是 form.submit() 提交表单，但没有触发受监视的事件，导致 form 事件处理程序不运行并且表单简单地发布而无需任何 JS 验证。我让表单正常工作的第一个想法是将表单提交函数更改为命名函数，例如:

form.addEventListener('submit', handleFormSubmission);

myComponent.addEventListener('keydown', (e) => {
  if(e.code === 'Enter') handleFormSubmission();
})

但这里的问题是，Web 组件不一定能用于多种表单，或者每次调用时都需要添加一个事件处理程序，以确保它与与该表单关联的函数名称相对应。形式。这必须在组件外部完成，并且确实降低了可读性。

我考虑过的另一个选项是在表单中搜索input[type=submit]或button[type=submit]并触发点击，但这对我来说似乎有点笨拙。

经过一番搜索，我发现了 dispatchEvent，它会触发 submit 事件，而不是简单地触发 submit()，如下所示:

class WebComponent extends HTMLElement {
  constructor() {
    ...

    let form = this.closest('form');

    this.addEventListener('keydown', (e) => {
      if(form && e.code === 'Enter') form.dispatchEvent(new Event('submit'));
    })
  }
}

现在我非常接近 - submit 处理程序，并且 console.log 触发，但是 e. PreventDefault() 不受尊重，这意味着如果我的 JS 验证出于任何原因想要终止提交，它不能...默认情况下。

更多的搜索(即实际上费心去阅读规范，而不是仅仅全速前进并向墙上扔泥巴看看粘了什么)我意识到 Event 构造函数需要一个用于设置的可选对象，以便您可以拥有(例如)new Event('submit', {bubbles: true, cancelable: true})。最后，它起作用了:

let form = document.getElementById('myform');

form.addEventListener('submit' (e) => {
  e.preventDefault();

  console.log('Form is posting');

  // Handle form stuff here
});

class WebComponent extends HTMLElement {
  constructor() {
    ...

    let form = this.closest('form');

    this.addEventListener('keydown', (e) => {
      if(form && e.code === 'Enter') form.dispatchEvent(new Event('submit', {cancelable: true}));
    })
  }
}

Answer 1

澄清一下，答案是使用 dispatchEvent 创建一个新的 Event 并将 cancelable 设置为 true > 而不是 .submit()

例如

let form = document.getElementById('myform');

form.addEventListener('submit' (e) => {
  e.preventDefault();

  console.log('Form is posting');

  // Handle form stuff here
});

class WebComponent extends HTMLElement {
  constructor() {
    ...

    let form = this.closest('form');

    this.addEventListener('keydown', (e) => {
      if(form && e.code === 'Enter') form.dispatchEvent(new Event('submit', {cancelable: true}));
    })
  }
}