整个表格在更改时

Question

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

- Mori

---

为什么不呢？在HTML事件中，您可以每次调用相同的函数，因此只需要复制粘贴不超过20个字符并编写1个函数即可。 - 11684

这个有帮助吗？链接 - Nadir Sampaoli

Answer 1

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

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

- Mori

---

谢谢。做了一些测试后-我只想补充一下，这里的“change”事件非常适合这个场景，因为对于文本输入框，它不会在每次按键时触发，但就像我们所期望的那样，在失去焦点时如果有更改就会触发。就像这里：http://jsfiddle.net/54dftpL6/ - 因此，它似乎是“自动保存表单任何更改”的解决方案，我刚完成了这项任务，用的时间比我预期的要短得多 :) - konrados

6年后回答自己的问题，点个赞。 - Qwerty

一个表单控件如果不是其表单元素的后代（使用form属性可能会出现这种情况），则不会将事件冒泡到表单元素。为了适应这种情况，我们可以将事件监听器添加到document.body，并检查event.target.form是否与预期的表单匹配。 - Jemi Salo

截至2022年6月，表单中的textarea将不会触发表单的更改事件 :( - rodrigo-silveira

@rodrigo-silveira：我刚在Windows和Mac上的不同浏览器中尝试了一下，没有任何问题：整个表单onChange。 - Mori

如果您在表单中有一个重置按钮，您还需要订阅“重置”事件。 - ya.teck

Answer 2

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

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

如果你使用的是纯JavaScript，那么change事件不会冒泡（至少不会在跨浏览器时）。因此，你需要单独为每个输入元素附加事件处理程序：

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

（当然，您还需要对所有选择器和文本区域执行类似的操作）

- Steve

---

现在似乎所有主要的浏览器都支持form onchange。 - Mori

@Tony Merryfield: 现在 formElement.addEventListener('change', doSomething); 在所有主要的浏览器中都可以使用了。 - Mori

@TonyMerryfield：IE9 - Mori

太好了 - 谢谢。我从来没有找到关于这个的任何信息，但是在一个项目中使用它，对我们支持的浏览器来说运行得很好 :) - Tony Merryfield

@Mori为什么不把你的评论变成一个真正的回答呢？ - Ideogram