javascript - 捕获所有动态表单提交

Question

我正在考虑的几件事:

• 表单可以随时插入到 dom 中。一个 dom 就绪的监听器和 document.forms 上的迭代不是一个选项。

• 添加这个提交捕获逻辑是件好事，它应该可以跨浏览器工作，但是添加 jQuery 来让它工作就太过分了。

• 我们正在使用一个非常繁重的 dom 操作框架，该解决方案不应损害整体应用程序性能。

• 我不想添加 dom 插入监听器，因为它们很慢而且我们使用的框架经常将项目插入 dom。

重写 HTMLFormElement.prototype.submit 在以编程方式调用 .submit() 时有效，但在用户通过纯浏览器交互触发表单提交时无效。我发现监听提交事件适用于这两种情况，但为了监听事件，您需要引用每个表单实例。所有表单实例都可以通过 document.forms 获取，但 document.forms 是一个 HTMLCollection，没有 api 来监控变化 MutationObservers仅适用于 Nodes 而不是 HTMLCollections。我认为会起作用的两种方法看起来相当困惑。

1. setInterval 可用于监视 document.forms，如果新表单已添加到 HTMLCollection，则添加监听器到表格。

2. 监控文档突变事件并在 form 插入 dom 时添加监听器。

我尝试过的其他无效方法:

1. 为 document.forms 的长度属性使用 Object.defineProperty。

2. 覆盖 HTMLFormElement 的构造函数以运行正常的构造逻辑，然后为 submit 添加一个事件监听器。

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

Answer 1

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

然后:

// 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 */
};