代码之家 › 专栏 › 技术社区 › user2896120

组织多个onChange事件

events forms jquery javascript

user2896120 · 技术社区 · 7 年前

onChange 每种形式的活动。我需要24个 onChange公司 整个页面的事件。每个事件仅对该图调用唯一函数。所以在每个 onChange公司 事件是一个独特的函数,其参数由 onChange公司

我想知道的是,有没有办法减少 onChange公司 事件?写下24个事件让我想知道是否有更简单的方法。有?

2 回复 | 直到 7 年前

Lars-Kristian Johansen 7 年前

您只需要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>

Lars-Kristian Johansen 7 年前

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

this.parentNode.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>