在前端开发中，我们经常会遇到需要管理多个输入框值的场景，比如动态生成的表单列表、批量编辑的商品信息等，这时候就需要监听输入框数组的值变化，并且同步更新对应的数组数据，保证数据和视图的一致性。
基础实现：循环绑定input事件
如果输入框数组是静态的，也就是页面加载时就已经确定所有输入框，我们可以通过循环遍历输入框元素，给每个输入框绑定input事件，在事件回调中更新对应的数组元素。
首先准备HTML结构，这里创建3个输入框，对应一个初始数组：
<div class="input-list"> <input type="text" class="input-item" data-index="0"> <input type="text" class="input-item" data-index="1"> <input type="text" class="input-item" data-index="2"> </div>
对应的JS实现代码如下：
// 初始数组，对应三个输入框的初始值
let inputValues = ['', '', ''];
// 获取所有输入框元素
const inputItems = document.querySelectorAll('.input-item');
// 循环绑定input事件
inputItems.forEach((input, index) => {
// 可以给元素设置data-index属性标记索引，也可以直接用循环的index
input.addEventListener('input', function() {
// 更新对应索引的数组值
const idx = this.dataset.index ? parseInt(this.dataset.index) : index;
inputValues[idx] = this.value;
console.log('更新后的数组：', inputValues);
});
});处理动态新增的输入框
如果输入框是动态新增的，比如点击按钮添加新的输入框，这时候用上面的循环绑定方式就无法监听新增的输入框，我们可以使用事件委托的方式，把input事件绑定到输入框的父容器上，利用事件冒泡机制监听所有子输入框的变化。
HTML结构调整为包含新增按钮：
<div class="input-container">
<div class="input-list">
<input type="text" class="input-item">
</div>
<button id="addInput">新增输入框</button>
</div>JS实现代码如下：
// 初始数组，默认有一个空值
let dynamicInputValues = [''];
const inputList = document.querySelector('.input-list');
const addBtn = document.getElementById('addInput');
// 事件委托：把input事件绑定到父容器上
inputList.addEventListener('input', function(e) {
// 判断触发事件的是不是输入框
if (e.target.classList.contains('input-item')) {
// 获取当前输入框在父容器中的索引
const allInputs = Array.from(inputList.children);
const index = allInputs.indexOf(e.target);
// 更新对应索引的数组值
dynamicInputValues[index] = e.target.value;
console.log('动态更新后的数组：', dynamicInputValues);
}
});
// 新增输入框的逻辑
addBtn.addEventListener('click', function() {
// 创建新的输入框
const newInput = document.createElement('input');
newInput.type = 'text';
newInput.className = 'input-item';
// 插入到输入框列表中
inputList.appendChild(newInput);
// 给数组新增一个空值
dynamicInputValues.push('');
});注意事项
- 如果输入框的值需要初始化，可以在绑定事件前先给数组赋值初始值，再同步到输入框的value属性上。
- 使用事件委托时，要注意判断事件触发的目标元素，避免误监听其他元素的事件。
- 如果输入框的值变化不是通过用户输入，而是通过JS修改的，input事件不会触发，这时候如果需要监听，可以手动触发事件或者在修改值的同时更新数组。
除了input事件，还可以根据需求使用change事件，change事件在输入框失去焦点且值发生变化时触发，适合不需要实时更新、只需要在输入完成后更新的场景。开发者可以根据实际的业务需求选择合适的事件类型，实现输入框数组的值监听和数组更新功能。