javascript - 表单事件处理模式

Question

我使用的后端是发送 ajax post 请求而不是使用表单上的默认操作的理想选择。

考虑到这一点，我需要提取表单中选择的最终字段。

我有各种文本字段、单选按钮、复选框等。

我一直在努力很好地理解事件委托(delegate)和事件传播。我不完全确定这是否是我应该担心我想要实现的目标的主题。

我知道我可以编写代码，通过在每个字段上放置一个 ID 来获取表单中的所有信息，并让一个函数提取 ID 上的每个值，例如:

function example(){
  var field0 = $('#field0').val();
  var field1 = $('#field1').parent().hasClass('active')
  // ... and more    

}

我已经使用这种模式一段时间了，但我觉得它效率不高。

我有两种模式的想法，但我仍然不确定这是否是“常见做法”

1. 由于在提交表单之前我并不关心每个字段中的数据，因此我可以在表单上的所有基于输入的字段上运行循环并提取内容，而不是为每个字段分配 ID单独的输入字段。

2. 我可以监听表单上的更改(我不太确定如何执行此操作，这就是事件委托(delegate)/传播发挥作用的地方)。我不会等待提交按钮收集表单中的所有信息，而是使用某种类型的监听器来检测表单上的更改(不确定这是否可能)。

我已经使用当前的模式几个月了，希望提高自己。如果有人对我对新方法的想法有任何建议、链接或批评，我将不胜感激。

Answer 1

因此，您基本上提出了 3 种方法来获取所有在提交(或类似事件)时具有值的表单字段:

1. 对 ID 进行硬编码并检索其值，例如

var field_a = document.getElementById('a')
  , field_b = document.getElementById('b')
  , form = document.getElementById('my_form');

form.addEventListener('submit', function() {
  fetch('//your/api/endpoint', {
    method: 'POST',
    body: JSON.stringify({a: field_a.value, b: field_b.value})
  });
});

循环所有并检索它们的值，例如

var form = document.getElementById('my_form');

form.addEventListener('submit', function() {
  var values = [].reduce.call(
    form.querySelectorAll('input, textarea, select'),
    function(values, element) {
      values[element.name] = element.value;
      return values;
    },
    {}
  );

  fetch('//your/api/endpoint', {
    method: 'POST',
    body: JSON.stringify(values)
  });
});

观察表单内部的变化，并累积它们

var form = document.getElementById('my_form')
  , state = {};

form.addEventListener('change', function(e) {
  state[e.srcElement.name] = e.value;
});
form.addEventListener('submit', function() {
  fetch('//your/api/endpoint', {
    method: 'POST',
    body: JSON.stringify(state)
  });
});

从性能 Angular 来看，选项 1. 将是最快的，其次是 2，最后是 3(最后 2 个我不能 100% 确定，querySelectorAll 可能会很昂贵，但监听大量的 change 事件也可能是这样——这取决于我想说的更改事件触发的频率)。

从开发 Angular (设置表单需要多长时间)来看，2 和 3 应该没有那么不同，因为它们都是通用的(您可以使用我的代码示例作为开始)。

“真正的”数据绑定(bind)(如 Angular)或“纯状态”(如 React)也几乎可以归结为选项 2/3(只是框架将为您执行繁重的工作)。

关于选项 3(监听整个表单的更改):https://stackoverflow.com/a/4616720/1168892很好地解释了 JavaScript 中的事件冒泡是如何发生的。要使用它，您必须确保表单内没有元素取消 change 事件(否则它不会冒泡到表单本身)。不取消事件是默认行为，因此您必须明确地犯此错误(这样您就可以在实现中关注它)。

<小时/>

我在示例中没有使用 jQuery，因为现在这些都可以通过浏览器直接完成。我用的是Element.querySelectorAll , Array.reduce和 window.fetch .