观察表格提交

Question

在我的申请中，我需要通过 JavaScript 提交表格。我知道我可以用这段代码做到这一点：

[...document.querySelectorAll('form')].forEach(form => {
    form.addEventListener('submit', e => {
        //doing the processing here
        e.preventDefault();
    })
})

我从服务器获得完全生成的表单 HTML，我在必要时将其注入 DOM（或从那里删除它们）。通过这样做，已注册的事件处理程序将停止工作，因为表单元素已被删除或未注册。

是否可以注册一个全局的 »Submission Listener«，与此类似：

window.addEventListener('click' e => { … });

如果 DOM 更改，什么将永远不会被删除，或者我是否必须在每次 DOM 更改时注册提交处理程序？

不是重复的，因为提到的委托策略是我要找的，但不是点击事件，而是提交事件。

Answer 1

您绝对可以在提交事件冒泡时捕获它们，因此您可以通过监听在添加和删除动态表单时始终存在的父元素来实现您想要的。我喜欢用带有 ID 的包装器元素来做这件事，而不是听主体或 html 级别。这是一个仅使用 vanilla js 的非常简单的示例。代码笔在这里：http://codepen.io/bsidelinger912/pen/RGbWYb

HTML:

<div id="form-wrapper">
  <h2>Form 1</h2>
  <form id="form1">
    <input name="test" placeholder="enter something" />
    <input type="submit" value="submit" />
  </form>

  <h2>Form 2</h2>
  <form id="form2">
    <input name="test" placeholder="enter something" />
    <input type="submit" value="submit" />
  </form>
</div>
<button id="form-adder">
  + Add a form
</button>

Javascript

var formWrapper = document.getElementById('form-wrapper');

// capture the submit event in the parent div
formWrapper.addEventListener("submit", function(e) {
  e.preventDefault();
  console.log('submit captured');

  var thisForm = e.srcElement || e.originalTarget;
  console.log('form id:' + thisForm.id);
  console.log(thisForm.test.value);
});

// dynamically add divs and see we can still capture the submit
var divNum = 3;
function addDiv(e) {
  e.preventDefault();

  formWrapper.innerHTML += '<h2>Form ' + divNum + '</h2>\
  <form id="form' + divNum + '">\
    <input name="test" placeholder="enter something" />\
    <input type="submit" value="submit" />\
  </form>';

  divNum++;
}

document.getElementById('form-adder').addEventListener('click', addDiv);

观察表格提交

Observe Form Submission

javascript

events

event-delegation

dom-events

ecmascript-6