组织多个onChange事件 [英] Organizing multiple onChange events

问题描述

我在页面上有8个表格.每个表单都会更改其对应图形的值，而无需刷新页面.但是，我想这样做，这样就不必单击提交"按钮即可更改图形.每个表格都有3个表格元素.这意味着我需要为每个表单3个 onChange 事件.我整个页面需要24个 onChange 事件.每个 onChange 事件仅对该图调用一个唯一函数.因此，每个 onChange 事件内部都有一个独特的函数，具有由 onChange 事件提供的参数.

I have 8 forms on the page. Each form changes the values of its corresponding graph without refreshing the page. However, I'd like to make it so that I don't have to hit the submit button in order to change the graphs. I have 3 form elements for each form. This means that I need 3 onChange events for every form. I would need 24 onChange events for the whole page. Each onChange event calls a unique function only to that graph. So inside each onChange event is a unique function with the parameters supplied by the onChange event.

我想知道的是，有没有一种方法可以减少 onChange 事件的数量?写出24个事件使我想知道是否有更简单的方法.有没有?

What i'd like to know is that is there a way to reduce the number of onChange events? Writing out 24 events makes me wonder if there is a simpler way of doing it. Is there?

推荐答案

您只需要1个eventHandler，就可以发送要检查的其他ID.像这样的东西.

You only need 1 eventHandler, and you can send in different ids that you check for. Something like this.

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>

这篇关于组织多个onChange事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！