组织多个 onChange 事件答案

【问题标题】：Organizing multiple onChange events组织多个 onChange 事件
【发布时间】：2017-08-01 16:49:41
【问题描述】：

我在页面上有 8 个表单。每个表单都在不刷新页面的情况下更改其相应图形的值。但是，我想这样做，这样我就不必点击提交按钮来更改图表。每个表单都有 3 个表单元素。这意味着每个表单都需要 3 个onChange 事件。整个页面我需要 24 个 onChange 事件。每个onChange 事件仅对该图调用一个唯一函数。所以在每个onChange 事件内部都有一个独特的函数，其参数由onChange 事件提供。

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

【问题讨论】：

无论如何你都需要这 24 个独特的功能？还是它们仅在参数上有所不同？
不确定您是否只是想简化触发逻辑或整个过程。您可以通过使用 jQuery 选择器向组添加更改来简化触发逻辑 - 即 $(".in").change() 用于某个类的所有。
$(document).on('change', 'form :input', function(){ console.log(this) })
@Teemu 它们的区别仅在于参数。所以总的来说，会有8个独特的功能
请查看this improved fiddle。 jQuery 有 data-* 提取方法，当然，您可以使用这些方法来代替原生属性获取器。如果您还需要将输入的值作为参数传递，您可以在调用最终处理程序之前将其推送到 params 数组。

标签： javascript jquery forms events

【解决方案1】：

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

function onChangeInput(id) {
  switch (id) {
    case 1:
      console.log('Update form 1');
      break;

    case 2:
      console.log('Update form 2');
      break;
  }
}

<form>
  <label>Form 1</label><br>
  <input type="text" onchange="onChangeInput(1)">
  <input type="text" onchange="onChangeInput(1)">
</form>

<form>
  <label>Form 2</label><br>
  <input type="text" onchange="onChangeInput(2)">
  <input type="text" onchange="onChangeInput(2)">
</form>

【讨论】：

这正是我想要的！谢谢！
@user2896120 我敢打赌这不是你真正想要的。
您可以通过代码添加 onChange 处理程序。不过我觉得这样比较好理解。
@Teemu 嗯怎么样？
@user2896120 使用内联侦听器通常不是首选，您会得到一个巨大的switch 语句。您可以将事件委托给所有表单的最近祖先，并将唯一的函数名称和参数存储到元素中的data-* 属性中。

【解决方案2】：

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

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

最后，您可以通过查询输入元素并将事件处理程序添加到输入元素并使用addEventListener

var q = document.querySelectorAll.bind(document);

function updateForm(id) {
  console.log(id);
  document.getElementById('output').textContent = "Change detected in Form: " + id;
}

function onChangeEvent(event) {
  updateForm(this.parentNode.id);
}

var allInputs = q('form input');
allInputs.forEach(function(element) {
  element.addEventListener('change', onChangeEvent);
});

<form id="1">
  <label>Form 1</label><br>
  <input type="text">
  <input type="text">
</form>
<br>
<form id="2">
  <label>Form 2</label><br>
  <input type="text">
  <input type="text">
</form>
<br>
<form id="3">
  <label>Form 3</label><br>
  <input type="text">
  <input type="text">
</form>
<br>
<div id="output"></div>

【讨论】：