Question

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

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

Answer 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>

Answer 2

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

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

最后，您可以通过查询输入元素并将事件处理程序添加到输入元素并使用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); });

＆＃13;

<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>

＆＃13;

log4j.appender.LOGFILE=org.apache.log4j.rolling.RollingFileAppender
log4j.appender.LOGFILE.RollingPolicy=org.apache.log4j.rolling.TimeBasedRollingPolicy
log4j.appender.LOGFILE.RollingPolicy.FileNamePattern=/logs/application_%d{yyyy-MM-dd}.log

＆＃13;

组织多个onChange事件

2 个答案: