Question

考虑我有以下HTML：

<form id="myForm" action="/echo/html/" method="post">
  <input type="text" value="10" />
  <input type="submit" value="submit" />
</form>
<input type="submit" form="myForm" value="submit" />
<input id="myInput" type="text" form="myForm" />

并且使用该HTML我有以下JS：

document.addEventListener('submit', function(e) {
  console.log(e, 'addEventListener');
});

document.getElementById('myInput').addEventListener('keyup', function(e) {
  console.log(e.target.form);
  e.target.form.submit();
});

（注意：此代码已针对jsfiddle进行了优化，因此使用了/echo/html/。此处的文档为here）

上述代码分为三部分：

<form>（id="myForm"），其中包含text input和submit input。
submit input外myForm，但使用属性form="myForm"将在myForm内提交数据。
注册text input时的keyup将使用myForm触发e.target.form.submit()。 但是，这不会触发附加到文档的submit事件。

我的问题是：

如何模拟/触发/等。一个submit事件，它实际上使用我在上面描述的第三种方法（在submit上为{document触发了keyup当前正在监听的text input事件。 1}}）。

P.S。我无法获得代码片段，因为它在stackoverflow中出错，所以jsfiddle is here。

Answer 1

我认为这是因为您在form上触发了该事件，而没有将其冒泡到document。我很遗憾地无法找到关于它的文档的任何链接（因为它发生的原因）。如果有人能够提供这样的链接，我也有兴趣阅读它。

为了解决这个问题，我创建了一个submit Event实际起泡，也是由document捕获的：

document.addEventListener('submit', function(e) {
    console.log(e, 'documentEventListener');
});

document.getElementById('myForm').addEventListener('submit', function(e){
    console.log(e, 'myFormEventListener');
})

document.getElementById('myInput').addEventListener('keyup', function(e) {
    var event = new Event("submit", { bubbles: true });
    this.form.dispatchEvent(event);
});

https://jsfiddle.net/c1vnjjxr/3/

Answer 2

问题是＆＃34; myInput＆＃34;输入字段已经在表单标记之外。使用外部输入提交表单是为了获取表单并使用.submit（）方法。

document.addEventListener('submit', function(e) {
  console.log(e, 'addEventListener');
});

document.getElementById('myInput').addEventListener('keyup', function(e) {
  // console.log(e.target.form); <-- what is this for??
  document.getElementById("myForm").submit();
});

Answer 3

你为什么需要这个？

document.addEventListener('submit', function(e) {
  console.log(e, 'addEventListener');
});

只需将输入放在表单中，这样他们就可以提交了。

JS - 在文本输入上使用“表单属性”模拟表单提交

3 个答案: