整个表格 onChange答案

【问题标题】：Entire form onChange整个表格 onChange
【发布时间】：2019-04-01 13:04:29
【问题描述】：

如何为所有form 元素使用onChange 或类似事件？我不想为每个字段单独使用onChange。

【问题讨论】：

【解决方案1】：

您可以在form 元素上使用change 事件：

var form = document.querySelector('form');
form.addEventListener('change', function() {
    alert('Hi!');
});

【讨论】：

谢谢。在做了一些测试之后 - 我将补充一点，这里的“更改”事件非常适合这个，因为对于文本输入，它不会在每次按键时触发，但是，就像我们期望的那样 - 如果有一个模糊改变。就像这里：jsfiddle.net/54dftpL6 - 所以它似乎是“在任何更改时自动保存表单”任务的解决方案，我刚刚完成的时间比我预期的要短得多:)
为 6 年后回答您自己的问题点赞。
不是其表单元素后代的表单控件（可能带有form 属性）不会将事件冒泡到表单元素。为了适应这种情况，我们可以改为将事件侦听器添加到 document.body 并检查 event.target.form 是否匹配预期的形式。

【解决方案2】：

如果您使用的是 jQuery，您可以在表单元素上使用 change 事件，因为在 jQuery 中该事件会冒泡。

$('#formId').change(function(){...});

如果您使用纯 javascript，则更改事件不会冒泡（至少不会跨浏览器）。因此，您必须分别将事件处理程序附加到每个输入元素：

var inputs = document.getElementsByTagName("input"); 
for (i=0; i<inputs.length; i++){
   inputs[i].onchange = changeHandler;
}

（当然，您必须对所有选择和文本区域执行类似的操作）

【讨论】：

现在看来各大浏览器都支持form onchange了。
@Mori - 请您详细说明您的评论，现在对表单 onchange 有什么支持？
@Tony Merryfield：现在formElement.addEventListener('change', doSomething); 适用于所有主流浏览器。
@TonyMerryfield: IE9
@Mori 为什么不对您的评论做出真正的回答？