场景说明
在实际前端开发中，我们经常会遇到这样的需求：页面上有多个输入框，每个输入框对应对象数组中的某个元素的某个属性，当用户输入内容时，需要实时更新对应对象数组里的数据，方便后续提交或者做其他逻辑处理。下面我们就一步步实现这个功能。
输入框值变化的监听方式
常见的监听输入框值变化的方式有三种，我们可以根据实际场景选择：
- input事件：当输入框的值发生任何变化时触发，包括用户输入、粘贴、剪切等操作，是最常用的监听方式。
- change事件：只有当输入框失去焦点，且值相比之前发生变化时才会触发，适合不需要实时更新的场景。
- propertychange事件：IE旧版本浏览器支持的属性变化监听事件，现在基本不需要考虑，现代浏览器用input事件即可覆盖。
实现动态更新对象数组
基础数据结构
首先我们定义一个初始的对象数组，每个对象代表一条数据，同时给每个输入框绑定对应的索引和属性名，方便后续定位更新：
// 初始对象数组
let dataList = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 }
];
// 渲染输入框到页面，给每个输入框添加data-index和data-field属性标记对应索引和字段
function renderInputs() {
const container = document.getElementById('input-container');
container.innerHTML = '';
dataList.forEach((item, index) => {
const div = document.createElement('div');
div.innerHTML = `
<div>
<label>姓名：</label>
<input type="text" data-index="${index}" data-field="name" value="${item.name}">
<label>年龄：</label>
<input type="number" data-index="${index}" data-field="age" value="${item.age}">
</div>
`;
container.appendChild(div);
});
}
// 初始化渲染
renderInputs();绑定监听事件并更新数组
接下来我们给所有输入框绑定input事件，在事件回调中根据输入框的自定义属性找到对应的数组元素，更新对应的字段值：
// 获取所有输入框
const inputs = document.querySelectorAll('#input-container input');
// 遍历输入框绑定input事件
inputs.forEach(input => {
input.addEventListener('input', function() {
// 获取当前输入框对应的数组索引和字段名
const index = parseInt(this.getAttribute('data-index'));
const field = this.getAttribute('data-field');
// 获取输入框当前值
const value = this.value;
// 更新对象数组对应元素的值
// 如果是年龄字段，转换为数字类型
if (field === 'age') {
dataList[index][field] = parseInt(value) || 0;
} else {
dataList[index][field] = value;
}
// 可以在这里打印数组查看更新结果
console.log('更新后的对象数组：', dataList);
});
});使用事件委托优化
如果输入框是动态生成的，或者数量很多，用事件委托可以减少事件绑定的开销，只需要在父容器上绑定一次事件即可：
// 获取输入框容器
const container = document.getElementById('input-container');
// 在容器上绑定input事件委托
container.addEventListener('input', function(e) {
// 判断触发事件的是否是input元素
if (e.target.tagName.toLowerCase() === 'input') {
const index = parseInt(e.target.getAttribute('data-index'));
const field = e.target.getAttribute('data-field');
const value = e.target.value;
if (field === 'age') {
dataList[index][field] = parseInt(value) || 0;
} else {
dataList[index][field] = value;
}
console.log('委托方式更新后的数组：', dataList);
}
});注意事项
- 如果输入框的值是数字类型，更新数组时记得做类型转换，避免存储字符串类型的数字。
- 如果对象数组的元素有唯一id，也可以不用索引作为标识，用id匹配会更稳定，避免数组顺序变化后更新错误。
- 如果不需要实时更新，只是提交时获取最新值，也可以在提交的时候遍历输入框重新组装数组，不需要每次输入都更新。
完整HTML示例
下面是完整的可运行示例，你可以直接复制到HTML文件中查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>监听输入框更新对象数组示例</title>
</head>
<body>
<div id="input-container"></div>
<button onclick="console.log(dataList)">打印当前对象数组</button>
<script>
let dataList = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 }
];
function renderInputs() {
const container = document.getElementById('input-container');
container.innerHTML = '';
dataList.forEach((item, index) => {
const div = document.createElement('div');
div.innerHTML = `
<div style="margin: 10px 0;">
<label>姓名：</label>
<input type="text" data-index="${index}" data-field="name" value="${item.name}">
<label>年龄：</label>
<input type="number" data-index="${index}" data-field="age" value="${item.age}">
</div>
`;
container.appendChild(div);
});
}
renderInputs();
const container = document.getElementById('input-container');
container.addEventListener('input', function(e) {
if (e.target.tagName.toLowerCase() === 'input') {
const index = parseInt(e.target.getAttribute('data-index'));
const field = e.target.getAttribute('data-field');
const value = e.target.value;
if (field === 'age') {
dataList[index][field] = parseInt(value) || 0;
} else {
dataList[index][field] = value;
}
}
});
</script>
</body>
</html>
JavaScript输入框监听对象数组更新事件处理前端交互修改时间：2026-06-02 03:53:45