将HTML表单输入值存入数组时出现重复控制台日志问题

嘿，我来帮你搞定这个问题！你说数组能正常新增元素，但控制台日志会逐次多一条重复记录——虽然你知道自己写了两个console.log，但显然还有别的猫腻，十有八九是事件监听器被重复绑定了，咱们一步步捋：

最常见的原因：事件监听器重复绑定 #

你大概率是把表单的submit事件监听代码放在了某个会重复执行的逻辑里，比如：

• 放在了一个会被多次调用的函数中
• 放在了页面渲染相关的循环/回调里
• 每次表单重新渲染时都会重新绑定一次事件

举个错误示例，要是你写了这样的代码：

// 这个函数如果被调用多次，就会重复绑定submit事件
function initForm() {
  const form = document.getElementById('userForm');
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    // 你的存储逻辑：把输入值加入数组
    console.log('处理表单提交');
  });
}

// 假设initForm()被调用了3次，那点击一次提交就会触发3次回调，日志也会多3条
initForm();
initForm();
initForm();

对应的解决办法 #

1. 确保事件只绑定一次 #

把事件监听的代码放在只会执行一次的地方，比如页面加载完成的回调里：

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('userForm');
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    // 你的存储逻辑
    console.log('处理表单提交');
  });
});

2. 先移除旧监听器再绑定新的 #

如果你的逻辑不得不多次执行绑定代码，可以把回调函数单独存成变量，绑定前先移除旧的监听器：

// 把回调函数抽成独立变量
const handleFormSubmit = (e) => {
  e.preventDefault();
  // 你的存储逻辑
  console.log('处理表单提交');
};

function initForm() {
  const form = document.getElementById('userForm');
  // 先移除已有的监听器，避免重复绑定
  form.removeEventListener('submit', handleFormSubmit);
  // 再绑定新的
  form.addEventListener('submit', handleFormSubmit);
}

3. 检查是否混用了事件绑定方式 #

如果你既在HTML里用了内联的onsubmit属性（比如<form onsubmit="handleSubmit()">），又在JS里用了addEventListener，那每次提交会触发两次回调，也会导致重复日志。解决办法是只保留一种绑定方式，不要混用。

总结 #

核心问题就是同一个submit事件被绑定了多个回调函数，每次点击提交都会触发所有绑定的回调，所以日志会逐次增多。你按照上面的思路排查一下事件绑定的代码位置，应该就能解决啦！

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