如何遍历对象属性为多个DOM元素添加addEventListener？

嘿，我完全懂你想让代码更简洁优雅的心情！用对象来统一管理DOM元素是个挺棒的做法，不过for..in确实容易踩坑——它会遍历对象所有可枚举属性，包括原型链上继承来的属性，这大概率就是你出错的原因。

下面给你几个简洁可靠的实现方式，随便挑一个适合你的：

方法1：用Object.values() + forEach（最常用） #

假设你的DOM元素对象是这样的：

const domElements = {
  submitBtn: document.getElementById('submit-btn'),
  usernameInput: document.getElementById('username'),
  messageBox: document.querySelector('.message-box')
};

我们可以先提取对象里的所有DOM元素值，再批量添加监听器：

// 提取所有DOM元素到数组
const elementsArray = Object.values(domElements);

// 遍历数组，给每个元素加监听器
elementsArray.forEach(element => {
  // 替换成你需要的事件类型和处理函数
  element.addEventListener('click', handleElementClick);
});

// 示例事件处理函数
function handleElementClick(event) {
  console.log('触发事件的元素:', event.target);
}

Object.values()只会返回对象自身的属性值，完美避开了for..in带来的原型链属性问题，代码也很清爽。

方法2：用Object.entries()（需要用到属性名时） #

如果你想同时用到对象的键名（比如给不同元素做差异化处理），可以用Object.entries()拿到键值对：

Object.entries(domElements).forEach(([key, element]) => {
  element.addEventListener('input', () => {
    console.log(`正在输入的是${key}:`, element.value);
  });
});

方法3：用for..of循环（喜欢传统循环的话） #

如果更习惯用循环语法，也可以搭配Object.values()来写：

for (const element of Object.values(domElements)) {
  element.addEventListener('click', handleElementClick);
}

额外小提醒 #

为了避免对象里混入非DOM元素导致报错，可以加个简单的校验：

elementsArray.forEach(element => {
  // 确保当前值是有效的DOM元素
  if (element instanceof HTMLElement) {
    element.addEventListener('click', handleElementClick);
  }
});

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