Javascript 组织多个onChange事件

我在这页上有8张表格。每个表单在不刷新页面的情况下更改其相应图形的值。但是，我希望这样做，这样我就不必点击提交按钮来更改图表。每个表单有3个表单元素。这意味着每个表单都需要3个

onChange

事件。整个页面需要24个

onChange

事件。每个

onChange

事件仅对该图形调用一个唯一的函数。因此，在每个

onChange

事件中都有一个独特的函数，其参数由

onChange

事件提供

---

我想知道的是，有没有办法减少onChange事件的数量？写下24个事件让我想知道是否有更简单的方法。有吗

您只需要1个eventHandler，并且可以发送不同的ID来检查。像这样的

函数onChangeInput（id）{
开关（id）{
案例1：
console.log（“更新表格1”）；
打破
案例2：
console.log（“更新表格2”）；
打破
}
}

表格1

表格2

您只需要一个eventHandler，就可以发送不同的ID进行检查。像这样的

函数onChangeInput（id）{
开关（id）{
案例1：
console.log（“更新表格1”）；
打破
案例2：
console.log（“更新表格2”）；
打破
}
}

表格1

表格2

为了好玩，这里有另一种改进解决方案的方法

首先，每个表单都获得一个Id。然后在事件处理程序中，您可以通过执行

this.parentNode.Id

来获得该Id。现在，输入元素不需要知道应该更新什么形式

最后，您可以通过查询输入元素并使用

addEventListener

var q=document.querySelectorAll.bind（文档）；
函数updateForm（id）{
console.log（id）；
document.getElementById（'output'）.textContent=“在表单中检测到的更改：”+id；
}
函数onChangeEvent（事件）{
updateForm（this.parentNode.id）；
}
var allInputs=q（“表格输入”）；
allInputs.forEach（函数（元素）{
元素。addEventListener（'change'，onChangeEvent）；
});

表格1



表格2



表格3



为了好玩，这里有另一种改进解决方案的方法

首先，每个表单都获得一个Id。然后在事件处理程序中，您可以通过执行
this.parentNode.Id
来获得该Id。现在，输入元素不需要知道应该更新什么形式

最后，您可以通过查询输入元素并使用
addEventListener


var q=document.querySelectorAll.bind（文档）；
函数updateForm（id）{
console.log（id）；
document.getElementById（'output'）.textContent=“在表单中检测到的更改：”+id；
}
函数onChangeEvent（事件）{
updateForm（this.parentNode.id）；
}
var allInputs=q（“表格输入”）；
allInputs.forEach（函数（元素）{
元素。addEventListener（'change'，onChangeEvent）；
});

表格1



表格2



表格3



在任何情况下，您都需要这24种独特的功能吗？或者它们只是在参数上有所不同？不确定您只是想简化触发逻辑还是整个过程。您可以通过使用jQuery选择器添加对组的更改来简化触发逻辑——即对所有特定类的
$（“.in”）.change（）
。
$（document）。在（'change'，form:input'，function（）{console.log（this）}）
@Teemu上，它们仅在参数上有所不同。因此，一般来说，将有8个独特的功能请检查。jQuery有方法来执行
data-*
extracting，当然，您可以使用这些方法来代替本机属性getter。如果还需要将输入值作为参数传递，可以在调用最终处理程序之前将其推送到
params
数组。在任何情况下都需要这24个唯一函数？或者它们只是在参数上有所不同？不确定您只是想简化触发逻辑还是整个过程。您可以通过使用jQuery选择器添加对组的更改来简化触发逻辑——即对所有特定类的
$（“.in”）.change（）
。
$（document）。在（'change'，form:input'，function（）{console.log（this）}）
@Teemu上，它们仅在参数上有所不同。因此，一般来说，将有8个独特的功能请检查。jQuery有方法来执行
data-*
extracting，当然，您可以使用这些方法来代替本机属性getter。如果您还需要将输入值作为参数传递，可以在调用最终处理程序之前将其推送到
params
数组。这正是我想要的！谢谢大家!@user2896120我打赌这不是您真正想要的。您可以通过代码添加onChange处理程序。但我认为这更容易理解。@Teemu-Hmm怎么会这样？@user2896120通常不喜欢使用内联侦听器，您会得到一个巨大的
开关
语句。您可以将事件委托给所有表单中最接近的祖先，并将唯一的函数名和参数存储到元素中的
data-*
属性中。这正是我想要的！谢谢大家!@user2896120我打赌这不是您真正想要的。您可以通过代码添加onChange处理程序。但我认为这更容易理解。@Teemu-Hmm怎么会这样？@user2896120通常不喜欢使用内联侦听器，您会得到一个巨大的
开关
语句。您可以将事件委托给所有表单中最接近的祖先，并将唯一的函数名和参数存储到元素中的
data-*
属性。