捕获所有动态表单提交答案

【问题标题】：Capture all dynamic form submits捕获所有动态表单提交
【发布时间】：2014-06-05 18:56:58
【问题描述】：

我正在考虑的几件事：

可以在任何时间点将表单插入到 dom 中。一个 dom 就绪的监听器和对 document.forms 的迭代不是一个选项。
添加这个提交捕获逻辑是一个不错的选择，它应该可以跨浏览器工作，但添加 jQuery 使其工作将是矫枉过正。
我们正在使用一个非常繁重的 dom 操作框架，该解决方案不应损害整体应用程序的性能。
我不想添加 dom 插入侦听器，因为它们很慢而且我们使用的框架经常将项目插入到 dom 中。

覆盖HTMLFormElement.prototype.submit 在.submit() 以编程方式调用时有效，但在用户通过纯粹的浏览器交互触发表单提交时无效。我发现收听提交事件适用于这两种情况，但为了收听事件，您需要引用每个表单实例。所有表单实例都可以通过document.forms 获取，但document.forms 是一个HTMLCollection，并且没有用于监视更改MutationObservers 的api 仅适用于Nodes 而不是HTMLCollections。我认为可行的两种方法似乎很混乱。

setInterval 可用于监视 document.forms，如果已将新表单添加到 HTMLCollection，则将侦听器添加到表单中。
在将form 插入到dom 时，监控文档突变事件并添加监听器。

我尝试过的其他丑陋的方法不起作用：

使用Object.defineProperty 作为document.forms 的长度属性。
重写HTMLFormElement的构造函数以运行正常的构造逻辑，然后为submit添加一个事件监听器。

关于如何做的任何建议？我倾向于使用setInterval，但不能保证这种方法在所有情况下都有效。

【问题讨论】：

标签： javascript forms dom

【解决方案1】：

为了捕获用户提交的表单，您可以使用事件委托到正文。

然后：

// Capture user submitted forms:
document.body.addEventListener('submit', function (e) {
    /* `e.target` is the form being submitted 
       Use `e.preventDefault()` to prevent submitting it */
}, false);

// Capture programmatically submitted forms:
var _submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = function () {
    /* `this` is the form being submitted 
       Use `_submit.call(this)` to submit it */
};

【讨论】：