Javascript 单击与输入vs更改对应的复选框？

我有一张表格。我只想在用户选中8个可用复选框中的4个时才允许表单提交；一旦用户选中4个复选框，我想禁用其余未选中的复选框

我是否应该向

click

事件添加挂钩？或者可能是

输入

事件？或者是

更改
事件

我被似乎相互重复功能的事件数量吓坏了

我也被文件弄糊涂了

:

对于带有
type=checkbox
或
type=radio
的
元素，每当用户切换控件时，应根据触发
输入事件。然而，历史上并非总是如此。检查兼容性，或者对这些类型的元素使用
change
事件

:

与
输入
事件不同，元素的
值的每次更改都不一定触发
更改
事件

及以下:

根据要更改的元素类型以及用户与元素交互的方式，
change
事件在不同的时刻触发：


当元素为
时：选中
和
（通过单击或使用键盘）

:

当指针位于元素内部时，同时按下和释放定点设备按钮（如鼠标的主鼠标按钮）时，元素将接收到
单击
事件

做法：

下面的JS fiddle似乎暗示所有3个事件都是等效的。单击复选框、单击标签、聚焦复选框并按键盘上的空格键似乎都会触发所有三个事件


const checkbox=document.querySelector（'input[type=checkbox'）；
for（常量事件['input'、'click'、'change']）{
复选框.addEventListener（事件，（）=>{
log.textContent=`${event}\n${log.textContent}`
})
}
切换
它们不是重复的。有细微的差别

change
一旦值或状态改变，元素就会失去焦点


$（'input'）。在（'change'，function（）上{
console.log（'changed'）；
});
这3个事件彼此重复功能，因为您看到的复选框恰好是一个特例

例如，如果要获取文本字段


每当使用用户界面更改元素中的文本时，将触发事件
input
每当文本元素失去焦点时，就会触发事件
change
（在大多数浏览器上）。它只会触发一次，而不是在每次击键后触发
每当用户单击文本字段时，
click
事件将触发

如果我们将此应用于复选框（请记住，复选框只能更改为一件事：
checked=>unchecked
或
unchecked=>checked
）


每当使用用户界面更改选中状态时，将触发事件
input
每当选中状态发生更改时，将触发事件
change
在一个元素中
检查状态完成更改后，单击事件将触发

这3个事件的功能非常相似（几乎重复），因为它们都试图做一些不同的事情，在功能上在复选框上做相同的事情。唯一的区别是细微的实现细节

我会使用
单击
，以避免不同浏览器的用户出现问题。
单击事件不会捕捉空格键状态的更改。
实际上，它似乎捕捉到空格键，就像我的小提琴一样；我在我的作品中提到了这一点。修复了禁用的评论。不知道为什么我认为我记得那个行为。
要测试复选框上的（…）空格键更改，你可以单击输入框，然后按住shift+tab键以聚焦复选框以点击空格键。
我很抱歉重复我自己的操作，但是再次，如果我在你的代码段中添加一个
单击
侦听器，看来，
点击
确实抓住了空格键！我单击输入，然后按住shift+tab键以聚焦复选框，然后按空格键并记录事件！请阅读我答案的最后一段。复选框上这些事件的实现方式似乎与其他输入元素（如文本框）的实现方式不同。好的，谢谢。我确实读了你答案的最后一段，但据我所知，最后一段讨论的是
更改
vs
输入
，而不是
单击
。你回答的另一段仍然说：“复选框可以通过点击它来改变状态，或者关注它并点击空格键。单击事件不会捕获空格键状态更改。“我只是解释为什么我（可能是错误的？）理解您断言
click
不会捕获复选框上的空格键。