Question

我正在考虑的几件事情：

表格可以在任何时间点插入到dom中。一个dom ready listener和迭代document.forms不是一个选项。
添加此提交捕获逻辑是一件好事，它应该可以跨浏览器工作，但添加jQuery以使其工作会有点过分。
我们正在使用非常重的dom操作框架，解决方案不应该影响整体应用程序的性能。
我不想添加dom插入侦听器，因为它们很慢我们使用的框架经常将项目插入到dom中。

当以编程方式调用HTMLFormElement.prototype.submit时覆盖.submit()，但是当用户通过纯粹的浏览器交互触发表单提交时，覆盖document.forms。我发现听取提交事件适用于这两种情况但是为了监听事件，您需要对每个表单实例的引用。所有表单实例都可以通过document.forms获取，但Nodes是一个HTMLCollection，并且没有用于监控更改的API MutationObservers仅适用于HTMLCollections而不是{{1} }}。我相信这两种方法看起来很混乱。

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

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

使用Object.defineProperty获取document.forms的长度属性。
覆盖HTMLFormElement的构造函数以运行常规构造逻辑，然后为submit添加事件侦听器。

有关如何做的建议的任何提示？我倾向于使用setInterval但这种方法并不能保证在所有情况下都能正常工作。

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

捕获所有动态表单提交

1 个答案: