for...in循环使用addEventListener报key.addEventListener不是函数怎么办

for...in遍历普通对象时，循环拿到的key是对象的属性名字符串，不是你提前声明的DOM元素变量。
你的代码里第一次循环拿到的key是字符串"firstBtn"，第二次是字符串"secondBtn"，字符串类型不存在addEventListener方法，所以会抛出key.addEventListener is not a function的报错。

方案1：映射表统一存储DOM和对应逻辑 #

不要把DOM元素拆成单独变量声明，直接把DOM节点、点击后要触发的逻辑统一存在映射对象里，遍历的时候直接取对应的DOM节点即可：

// 统一存储按钮DOM和对应输出内容的映射
const btnConfig = {
  firstBtn: {
    el: document.querySelector('.first-btn'),
    logVal: 'apple'
  },
  secondBtn: {
    el: document.querySelector('.second-btn'),
    logVal: 'orange'
  }
};

for (const key in btnConfig) {
  const currentBtn = btnConfig[key].el;
  currentBtn.addEventListener('click', () => {
    console.log(btnConfig[key].logVal);
  });
}

对应的HTML不需要改动：

<button class="first-btn">First</button>
<button class="second-btn">Second</button>

方案2：公共类批量获取+自定义属性传参（推荐，冗余代码最少） #

如果需要绑定事件的按钮数量多，不用手动写一一对应的映射，给所有需要绑定事件的按钮加统一类名，用document.querySelectorAll一次性获取所有节点，再通过data-*自定义属性存每个按钮对应的参数即可：
修改后的HTML：

<button class="log-btn" data-log="apple">First</button>
<button class="log-btn" data-log="orange">Second</button>

对应的JS代码：

// 一次性获取所有需要绑定点击事件的按钮
const btnList = document.querySelectorAll('.log-btn');
btnList.forEach(btn => {
  btn.addEventListener('click', () => {
    console.log(btn.dataset.log);
  });
});

后续新增按钮只需要加log-btn类和对应data-log属性，不需要改JS逻辑，扩展性更好。

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