主页 / 问题 / 677094
Accepted
toxxxa
Asked:2020-06-09 06:07:01 +0000 UTC2020-06-09 06:07:01 +0000 UTC

如何在所有表单元素上挂起“更改”事件

  • 772

我想在我的脚本中摆脱 jQuery。

脚本的本质：

  1. 通过ajax加载表单
  2. 在表单更改上挂一个处理程序

无法正确挂起表单更改事件的处理程序。在 vanilla JS 上，据我所知，你不能把它挂在整个表单上，它必须分别在每个元素上完成。

var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
    if (request.status == 200) {
        var resp = request.responseText;
        container.innerHTML = resp;
        var form = container.getElementsByTagName('form')[0];
        if (form !== undefined) {
            var inputs = form.querySelectorAll('input, select');
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].addEventListener('change', calculate(calcID, url));
            }
        }
    }
};
request.send();

function calculate(calcID, url) {}

问题：加载表单后，处理程序立即被调用，次数与表单中的输入一样多。事件未挂起（当输入值改变时，不调用处理程序）

javascript

2 个回答

  1. Best Answer

    function handle(event) {
  if (event.target.tagName === 'INPUT') {
    console.log(event.type, event.target);
  }
}

document.querySelector('form').addEventListener('change', handle);
document.querySelector('form').addEventListener('input', handle);
    <form>
  <input type=text name=a>
  <input type=radio name=b value=1>
  <input type=radio name=b value=2>
  <input type=radio name=b value=3>
  <input type=checkbox name=c value=4>
  <input type=checkbox name=c value=5>
  <input type=checkbox name=c value=6>
</form>

    • 3

  2. 这个

    calculate(calcID, url)

    并且有一个直接的函数调用。

    必要的：

    inputs[i].addEventListener('change', function() { calculate(calcID, url); });

    或者

    var handler = function() { calculate(calcID, url); };
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('change', handler);
}
    • 1

相关问题