如何用JavaScript获取父div内输入控件的实时值？

最简洁高效的方法是用事件委托，不用给每个控件单独绑定事件，直接在父容器上监听即可，具体实现步骤如下：

核心思路 #

利用事件冒泡机制，在包含所有控件的父元素[data-filters]上绑定change事件，所有子控件的值变更都会触发这个事件，再通过事件对象定位到具体触发的控件，获取对应的值。

完整代码实现 #

修改后的JavaScript代码 #

/**
 * @return {void}
 */
getFiltersData: function() {
  const filtersContainer = document.querySelector('[data-filters]');
  
  // 给父容器绑定change事件
  filtersContainer.addEventListener('change', function(e) {
    const target = e.target;
    // 只处理input和select控件
    if (!['INPUT', 'SELECT'].includes(target.tagName)) return;

    const controlName = target.name;
    let value;

    // 根据控件类型获取对应值
    switch(true) {
      case target.type === 'checkbox':
        value = target.checked;
        console.log(`复选框 ${controlName}：${value ? '选中' : '未选中'}`);
        break;
      case target.type === 'radio':
        // 单选框只有选中时才触发change事件
        value = target.value || 'on'; // 未设置value时默认值为'on'
        console.log(`单选框 ${controlName}：选中，值为${value}`);
        break;
      case target.tagName === 'SELECT':
        value = target.value;
        console.log(`下拉框 ${controlName}：当前值为${value}`);
        break;
      default:
        // 其他input类型（如text、number等）
        value = target.value;
        console.log(`输入框 ${controlName}：当前值为${value}`);
    }

    // 这里可以将收集到的值存入全局变量或者发送请求
    // 示例：this.currentFilters[controlName] = value;
  });
},

额外补充：一次性收集所有控件值 #

如果需要在页面初始化或特定时机获取所有过滤器的当前状态，可以添加这个辅助函数：

collectAllFilterValues: function() {
  const filtersContainer = document.querySelector('[data-filters]');
  const allControls = filtersContainer.querySelectorAll('input, select');
  const filterValues = {};

  allControls.forEach(control => {
    const name = control.name;
    if (!name) return; // 跳过无name属性的控件

    if (control.type === 'checkbox') {
      filterValues[name] = control.checked;
    } else if (control.type === 'radio') {
      if (control.checked) filterValues[name] = control.value || 'on';
    } else {
      filterValues[name] = control.value;
    }
  });

  console.log('所有过滤器当前值：', filterValues);
  return filterValues;
}

为什么推荐事件委托？ #

• 性能更优：不用遍历大量控件逐个绑定事件，减少内存占用
• 扩展性强：后续动态新增的过滤器控件，无需重新绑定事件就能自动生效
• 代码更简洁：避免重复的事件绑定逻辑

内容的提问来源于stack exchange，提问作者Key Lol